Button
Displays a button or a component that looks like a button.
Installation
Usage
<Button variant=Outline> {"Button"->React.string} </Button>Cursor
Tailwind v4 switched from cursor: pointer to cursor: default for the button component.
If you want to keep the cursor: pointer behavior, add the following code to your CSS file:
@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}Examples
Size
Use the size prop to change the size of the button.
Default
Outline
Secondary
Ghost
Destructive
Link
Icon
With Icon
Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.
Rounded
Use the rounded-full class to make the button rounded.
Spinner
Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.
Button Group
To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.
Link
You can use the render prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.
Remember to set the nativeButton prop to false if you're returning an element that is not a button.
API Reference
Button
The Button component is a wrapper around the button element that adds a variety of styles and functionality.