Button cursor pointer setup during init
When running npx shadcn@latest init, you can use the --pointer flag to automatically enable cursor: pointer behavior for buttons: npx shadcn@latest init --pointer
shadcn/ui · Components · all subjects
button/usage
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Using links with button styling
Do not use the <Button> component for links because the React Aria Button component always applies role="button", which overrides the semantic link role on <a> elements. Instead, use the buttonVariants helper with a plain <a> tag to style a link as a button.
Button buttonVariants helper
The buttonVariants helper can be used to apply button styling to elements other than the Button component, such as making a link look like a button.
Button outline variant usage
To create an outline button, use: <Button variant="outline">Button</Button>
Button import path
To use the Button component, import it with: import { Button } from "@/components/ui/button"
Button basic usage example
Basic usage example: <Button variant="outline">Button</Button>
Button styled as link using buttonVariants
To make a link look like a button, use the buttonVariants helper with a plain <a> tag. Do not use <Button render={<a />} nativeButton={false} /> for links because the Base UI Button component applies role="button", which overrides the semantic link role on <a> elements.
Button component basic usage
Import the Button component with: import { Button } from "@/components/ui/button". Then use it in JSX: <Button variant="outline">Button</Button>
Button cursor property in Tailwind v4
Tailwind CSS v4 switched button components from cursor: pointer to cursor: default. If you want to keep the cursor: pointer behavior, add this CSS rule to your globals.css file: @layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } }. Alternatively, enable this during project setup with: npx shadcn@latest init --pointer
Button with icon usage
When adding an icon to a button, remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon element for correct spacing.
Button with spinner loading state
To show a loading state, render a <Spinner /> component inside the button. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for correct spacing.