Button
Displays a button or a component that looks like a button.
StatsHub stories
Button
shadcn previews
import { ArrowUpIcon } from "lucide-react";import { Button } from "@statshub/ui-web/components/button";Installation
Usage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</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:
You can also enable this during project setup with npx shadcn@latest init --pointer.
@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}Size
Use the size prop to change the size of the button.
import { ArrowUpRightIcon } from "lucide-react";import { Button } from "@statshub/ui-web/components/button";Default
import { Button } from "@statshub/ui-web/components/button";export default function ButtonDefault() {Outline
import { Button } from "@statshub/ui-web/components/button";export default function ButtonOutline() {Secondary
import { Button } from "@statshub/ui-web/components/button";export default function ButtonSecondary() {Ghost
import { Button } from "@statshub/ui-web/components/button";export default function ButtonGhost() {Destructive
import { Button } from "@statshub/ui-web/components/button";export default function ButtonDestructive() {Link
import { Button } from "@statshub/ui-web/components/button";export default function ButtonLink() {Icon
import { CircleFadingArrowUpIcon } from "lucide-react";import { Button } from "@statshub/ui-web/components/button";With Icon
Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.
import { IconGitBranch, IconGitFork } from "@tabler/icons-react";import { Button } from "@statshub/ui-web/components/button";Rounded
Use the rounded-full class to make the button rounded.
import { ArrowUpIcon } from "lucide-react";import { Button } from "@statshub/ui-web/components/button";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.
import { Button } from "@statshub/ui-web/components/button";import { Spinner } from "@statshub/ui-web/components/spinner";Button Group
To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.
"use client";import * as React from "react";As Link
You can use the buttonVariants helper to make a link look like a button.
Do not use <Button render={<a />} nativeButton={false} /> for links. The Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.
import { buttonVariants } from "@statshub/ui-web/components/button";export default function ButtonRender() {RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client";import { ArrowRightIcon, PlusIcon } from "lucide-react";API Reference
Button
The Button component is a wrapper around the button element that adds a variety of styles and functionality.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |