Button
Buttons are components that allow users to take actions within your website or app.
Usage
import { Button } from "#/ui/components/Button"<Button variant="primary">Primary</Button>Variants
The basic button comes with 5 variants
<Button
variant="primary" // or outline, ghost, text, destructive
>
Primary
</Button>Size
Each button has 6 different size options to choose between
<Button
variant="primary"
size="xs" // or sm, md, lg, xl, 2xl
>
Button
</Button>All of these different sizes are available for each variant
Icons
You can place icons within a button by passing it as a child
<Button variant="primary">
<ArrowLeftIcon /> Previous
</Button>
<Button variant="primary">
Next <ArrowRightIcon />
</Button>If you use an icon without text, make sure to include a hidden label for accessibility purposes
<Button variant="destructive">
<span className="sr-only">Delete</span>
<Trash01Icon />
</Button>SVG Icons will automatically be resized based on the button size
Links
You can use buttons as links by passing an href prop
<Button variant="primary" href="/page/1">
Previous
</Button>Interactivity
While buttons are often used within forms or as links, there are some instances where you may need to use them for something else.
onClick
You can pass an onClick prop to a button to make it interactive, just like you can with a regular HTML button
Customization
Classes
You can customize individual buttons by passing a className prop. If this clashes with the default styles, the className will take precedence.
<Button
variant="destructive"
className="bg-amber-500 hover:bg-amber-400 focus:bg-amber-400 border-amber-500"
>
Warning
</Button>Due to how tailwind-merge works, you won’t need to worry about conflicting styles when using the className prop.
Make sure you override all the states to ensure a consistent experience, or you’ll end up with something like this