Button

Used to trigger actions based on interactions.

Props

children

stringThe content of the button

color

variant

"solid" | "soft" | "ghost"The variant of the button

size

"medium" | "small"The size of the button

shape

"square" | "round"The shape of the button

disabled

booleanWhether the button is disabled

booleanWhether the button is loading

import * as React from "react";
import { Button } from "basics";

export default () => {
  return (
    <Button color="accent" variant="solid" size="medium">
      Submit
    </Button>
  );
}

import * as React from "react";
import { Button } from "basics";

export default () => {
  return (
    <Button color="accent" variant="solid" size="medium">
      Submit
    </Button>
  );
}

Showcase


<Flex direction="column" gap="16" style={{ margin: '24px 0' }}>
  <Flex gap="16" align="center">
    <Button variant="solid" color="accent">
      Submit
    </Button>
    <Button variant="soft" color="accent">
      Submit
    </Button>
    <Button variant="ghost" color="accent">
      Submit
    </Button>
    <Button variant="solid" color="accent" size="small">
      Submit
    </Button>
    <Button variant="soft" color="accent" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="accent" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="accent" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="accent" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="accent" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="green">
      Submit
    </Button>
    <Button variant="soft" color="green">
      Submit
    </Button>
    <Button variant="ghost" color="green">
      Submit
    </Button>
    <Button variant="solid" color="green" size="small">
      Submit
    </Button>
    <Button variant="soft" color="green" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="green" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="green">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="green">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="green">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="green" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="green" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="green" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="red">
      Submit
    </Button>
    <Button variant="soft" color="red">
      Submit
    </Button>
    <Button variant="ghost" color="red">
      Submit
    </Button>
    <Button variant="solid" color="red" size="small">
      Submit
    </Button>
    <Button variant="soft" color="red" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="red" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="red">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="red">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="red">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="red" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="red" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="red" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="amber">
      Submit
    </Button>
    <Button variant="soft" color="amber">
      Submit
    </Button>
    <Button variant="ghost" color="amber">
      Submit
    </Button>
    <Button variant="solid" color="amber" size="small">
      Submit
    </Button>
    <Button variant="soft" color="amber" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="amber" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="amber" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="amber" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="amber" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="pink">
      Submit
    </Button>
    <Button variant="soft" color="pink">
      Submit
    </Button>
    <Button variant="ghost" color="pink">
      Submit
    </Button>
    <Button variant="solid" color="pink" size="small">
      Submit
    </Button>
    <Button variant="soft" color="pink" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="pink" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="pink" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="pink" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="pink" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="gray">
      Submit
    </Button>
    <Button variant="soft" color="gray">
      Submit
    </Button>
    <Button variant="ghost" color="gray">
      Submit
    </Button>
    <Button variant="solid" color="gray" size="small">
      Submit
    </Button>
    <Button variant="soft" color="gray" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="gray" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="gray" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="gray" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="gray" size="small">
      Submit
    </Button>
  </Flex>
</Flex><Flex direction="column" gap="16" style={{ margin: '24px 0' }}>
  <Flex gap="16" align="center">
    <Button variant="solid" color="accent">
      Submit
    </Button>
    <Button variant="soft" color="accent">
      Submit
    </Button>
    <Button variant="ghost" color="accent">
      Submit
    </Button>
    <Button variant="solid" color="accent" size="small">
      Submit
    </Button>
    <Button variant="soft" color="accent" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="accent" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="accent">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="accent" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="accent" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="accent" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="green">
      Submit
    </Button>
    <Button variant="soft" color="green">
      Submit
    </Button>
    <Button variant="ghost" color="green">
      Submit
    </Button>
    <Button variant="solid" color="green" size="small">
      Submit
    </Button>
    <Button variant="soft" color="green" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="green" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="green">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="green">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="green">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="green" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="green" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="green" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="red">
      Submit
    </Button>
    <Button variant="soft" color="red">
      Submit
    </Button>
    <Button variant="ghost" color="red">
      Submit
    </Button>
    <Button variant="solid" color="red" size="small">
      Submit
    </Button>
    <Button variant="soft" color="red" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="red" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="red">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="red">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="red">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="red" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="red" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="red" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="amber">
      Submit
    </Button>
    <Button variant="soft" color="amber">
      Submit
    </Button>
    <Button variant="ghost" color="amber">
      Submit
    </Button>
    <Button variant="solid" color="amber" size="small">
      Submit
    </Button>
    <Button variant="soft" color="amber" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="amber" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="amber">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="amber" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="amber" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="amber" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="pink">
      Submit
    </Button>
    <Button variant="soft" color="pink">
      Submit
    </Button>
    <Button variant="ghost" color="pink">
      Submit
    </Button>
    <Button variant="solid" color="pink" size="small">
      Submit
    </Button>
    <Button variant="soft" color="pink" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="pink" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="pink">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="pink" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="pink" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="pink" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="gray">
      Submit
    </Button>
    <Button variant="soft" color="gray">
      Submit
    </Button>
    <Button variant="ghost" color="gray">
      Submit
    </Button>
    <Button variant="solid" color="gray" size="small">
      Submit
    </Button>
    <Button variant="soft" color="gray" size="small">
      Submit
    </Button>
    <Button variant="ghost" color="gray" size="small">
      Submit
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button shape="round" variant="solid" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="gray">
      Submit
    </Button>
    <Button shape="round" variant="solid" color="gray" size="small">
      Submit
    </Button>
    <Button shape="round" variant="soft" color="gray" size="small">
      Submit
    </Button>
    <Button shape="round" variant="ghost" color="gray" size="small">
      Submit
    </Button>
  </Flex>
</Flex>

Decorations


<Flex direction="column" gap="16">
  <Flex gap="16" align="center">
    <Button variant="soft" color="accent">
      Submit
      <CheckIcon />
    </Button>
    <Button variant="solid" color="gray">
      <CopyIcon />
      Copy
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="accent">
      Submit
      <CheckIcon />
    </Button>
    <Button variant="ghost" color="gray">
      <LinkIcon />
      Copy
    </Button>
  </Flex>
</Flex><Flex direction="column" gap="16">
  <Flex gap="16" align="center">
    <Button variant="soft" color="accent">
      Submit
      <CheckIcon />
    </Button>
    <Button variant="solid" color="gray">
      <CopyIcon />
      Copy
    </Button>
  </Flex>
  <Flex gap="16" align="center">
    <Button variant="solid" color="accent">
      Submit
      <CheckIcon />
    </Button>
    <Button variant="ghost" color="gray">
      <LinkIcon />
      Copy
    </Button>
  </Flex>
</Flex>

Polymorphic


<Button asChild variant="solid" color="accent" shape="round">
  <a href="#">Get Started →</a>
</Button><Button asChild variant="solid" color="accent" shape="round">
  <a href="#">Get Started →</a>
</Button>