ComponentsButton

Button

Display a clickable button with many varieties of style.

variant
color
size
padding
shadow
radius
transition
progress
<Button>Button</Button>

Custom styles

You can style any variant overriding its styles using className.

variant
color
<Button className="cursor-auto hover:-skew-x-6 active:scale-90">Button</Button>

Custom variant

You can pass variant="none" and create your own variant using just className.
Also, you can use text-current-{50-950}, bg-current-{50-950}, border-current-{50-950}, etc. from the color palette already defined in color prop.

See example below:

color
className
<Button
  className="bg-current-200 text-current-500 hover:bg-current-500 hover:text-current-50 transform active:translate-y-0.5"
  variant="none"
>
  Button
</Button>