Docs

Button

The Button component allows the user to perform actions.
const [counter, setCounter] = useState(0);
return (
  <div className={cn('flex', 'p-l', 'gap-m')}>
    <Button onClick={() => setCounter(counter+1)}>Clicked {counter} times</Button>
  </div>
);

Styles

The following variants can be used to distinguish between actions of different importance in the UI:

<Button theme='primary'>Primary</Button>
<Button theme='secondary'>Secondary</Button>
<Button theme='tertiary'>Tertiary</Button>

Customization

Buttons can be customized with different styles and properties. As an example, here’s a disabled button:

<Button disabled>Disabled</Button>