Button

Trigger an action or event, such as submitting a form or displaying a dialog.

Usage

Size

Use the size prop to control the size of the button.

<Flex gap="3" align="center">
  <Button size="small" variant="ghost">
    Button
  </Button>
  <Button size="medium" variant="ghost">
    Button
  </Button>
  <Button size="large" variant="ghost">
    Button
  </Button>
  <Button size="xlarge" variant="ghost">
    Button
  </Button>
</Flex>

Variant

Use the variant prop to control the visual style of the button.

<Flex align="center" gap="3">
  <Button variant="solid">Button</Button>
  <Button variant="ghost">Button</Button>
  <Button variant="transparent">Button</Button>
  <Button variant="outlined">Button</Button>
  <Button variant="translucent">Button</Button>
</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme.

<Flex gap="3">
  <Button variant="ghost">Button</Button>
  <Button color="indigo" variant="ghost">
    Button
  </Button>
  <Button color="cyan" variant="ghost">
    Button
  </Button>
  <Button color="orange" variant="ghost">
    Button
  </Button>
  <Button color="crimson" variant="ghost">
    Button
  </Button>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Flex direction="column" gap="3">
  <Flex gap="3">
    <Button variant="solid">Button</Button>
    <Button variant="ghost">Button</Button>
    <Button variant="transparent">Button</Button>
    <Button variant="outlined">Button</Button>
    <Button variant="translucent" highContrast>
      Button
    </Button>
  </Flex>
  <Flex gap="3">
    <Button variant="solid" highContrast>
      Button
    </Button>
    <Button variant="ghost" highContrast>
      Button
    </Button>
    <Button variant="transparent" highContrast>
      Button
    </Button>
    <Button variant="outlined" highContrast>
      Button
    </Button>
    <Button variant="translucent" highContrast>
      Button
    </Button>
  </Flex>
</Flex>

Radius

Use the radius prop to assign a specific radius value, ignoring the global theme.

<Flex gap="3">
  <Button radius="none" variant="ghost">
    Button
  </Button>
  <Button radius="large" variant="ghost">
    Button
  </Button>
  <Button radius="full" variant="ghost">
    Button
  </Button>
</Flex>

With icons

You can nest icons directly inside the button. An appropriate gap is provided automatically.

<Flex gap="3">
  <Button variant="solid" iconPrepend={<Icon type="Zap" />}>
    Button
  </Button>
  <Button variant="ghost" iconPrepend={<Icon type="Zap" />}>
    Button
  </Button>
  <Button variant="transparent" iconPrepend={<Icon type="Zap" />}>
    Button
  </Button>
  <Button variant="outlined" iconPrepend={<Icon type="Zap" />}>
    Button
  </Button>
  <Button variant="translucent" iconPrepend={<Icon type="Zap" />}>
    Button
  </Button>
</Flex>

API

Props

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
variant	'solid' | 'outlined' | 'ghost' | 'transparent' | 'translucent'	'solid'	-
buttonType	'button' | 'reset' | 'submit'	'button'	-
justify	'start' | 'center' | 'end'	'center'	-
block	boolean	-	-
disabled	boolean	-	-
iconPrepend	ReactNode	-	-
iconAppend	ReactNode	-	-
href	string	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-