Skip to main content

Button

Result
Loading...
Live Editor
<Button>Button</Button>

Appearance​

Result
Loading...
Live Editor
const appearances = ['solid', 'faded', 'outline', 'ghost', 'text'];

render(
  <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
    {appearances.map(appearance => (
      <Button key={appearance} appearance={appearance}>
        {appearance}
      </Button>
    ))}
  </div>
);

Variant​

Result
Loading...
Live Editor
const variants = ['primary', 'secondary', 'neutral', 'danger', 'warning', 'success', 'dark', 'light'];

render(
  <div style={{display: 'flex', gap: '10px'}}>
    {variants.map(variant => (
      <Button key={variant} variant={variant}>
        {variant}
      </Button>
    ))}
  </div>
);

Size​

Result
Loading...
Live Editor
const sizes = ['xs', 'sm', 'normal', 'md', 'lg', 'xl'];

render(
  <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
    {sizes.map(size => (
      <Button key={size} size={size}>
        {size}
      </Button>
    ))}
  </div>
);

Full Width​

Result
Loading...
Live Editor
<Button fullWidth>Full Width</Button>

Shape​

Result
Loading...
Live Editor
const shapes = ['rounded', 'pill', 'circle', 'square'];

render(
  <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
    {shapes.map(shape => (
      <Button key={shape} shape={shape}>
        {shape}
      </Button>
    ))}
  </div>
);

Slots​

Content can be added to the start and end of the button using the slotStart and slotEnd props.

Result
Loading...
Live Editor
// Icons from https://tabler.io/docs/icons/react
<div style={{display: 'flex', gap: '10px'}}>
  <Button slotEnd={<IconArrowRight size={20}/>}>With icon</Button>
  <Button slotStart="😀">With Emoji</Button>
  <Button slotStart="Foo -">With Text</Button>
</div>

Justify​

The justify prop can be used to align the content of the button.

Result
Loading...
Live Editor
<div>
  <Button fullWidth mb="10px" justify="start">start</Button>
  <Button fullWidth mb="10px" justify="center">center</Button>
  <Button fullWidth mb="10px" justify="end">end</Button>
  <Button fullWidth mb="10px" justify="space-between" slotStart="😀" slotEnd="😠">space-between</Button>
  <Button fullWidth mb="10px" justify="space-around" slotStart="😀" slotEnd="😠">space-around</Button>
</div>

Loading​

When the loading prop is set, the Button button will be disabled and show a Loader in the middle of the button.

Result
Loading...
Live Editor
<Button loading>Button</Button>

Disabled​

When the disabled prop is set, the Button button will be disabled.

Result
Loading...
Live Editor
<Button disabled onClick={() => console.log('on click')}>Button</Button>

Props​