Component
Button
Triggers an action. Solid for the main action in a view, secondary for everything else, ghost for quiet actions in toolbars and rows, destructive (or destructive-soft) for destructive actions. glossy and destructive-glossy are raised versions of solid and destructive. iconOnly makes a square button with a required aria-label.
Xem trước
import { Button } from "@/components/ui/button"
<Button>Save</Button>Cách dùng
Khi nào dùng
- Trigger an action on the current page: save, submit a form, open a dialog, delete an item.
- Mark the one main action of a view with the solid variant.
- Quiet actions that repeat on every row or sit in a toolbar, with the ghost variant. An icon alone, with iconOnly and a label for screen readers.
Khi nào không dùng
- Going to another page. Use a link; for the look of a button, pass asChild and put the link inside, so it stays a real link.
- Labels that are not actions, such as a status. Use Badge.
Biến thể
variant
solid: the main action, on the accent. secondary: neutral actions. ghost: neutral actions with no fill or border until hover, for toolbars, icon buttons and actions inside rows. destructive: destructive actions such as Delete, on the red solid with color-text-on-danger (4.53:1). destructive-soft: lighter destructive actions on the soft red fill. glossy: the main action, raised: the accent fill under a sheen lit from above, with inner edges and a med shadow. destructive-glossy: the same raised look on the red solid.
import { Button } from "@/components/ui/button"
<Button>Save</Button>
<Button variant="secondary">Save</Button>
<Button variant="ghost">Save</Button>
<Button variant="destructive">Save</Button>
<Button variant="destructive-soft">Save</Button>
<Button variant="glossy">Save</Button>
<Button variant="destructive-glossy">Save</Button>size
Height from size-element-*: sm 28px, md 32px (the default), lg 36px, xl 44px with a mouse. On touch md grows to 36px, lg to 44px and xl to 48px; sm keeps its look and a 44px hit area. Use lg or xl for bigger targets, such as the main action of a mobile screen. Text is 13px in sm, 14px in md and lg, 16px in xl.
import { Button } from "@/components/ui/button"
<Button size="sm">Save</Button>
<Button>Save</Button>
<Button size="lg">Save</Button>
<Button size="xl">Save</Button>Ví dụ
Default
import { Button } from "@/components/ui/button"
<Button>Save</Button>With icon
import { IconPlus } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
<Button variant="secondary">
<IconPlus size={16} />
New file
</Button>As a link
Keeps link semantics (href, middle click) with button styles.
import { Button } from "@/components/ui/button"
<Button asChild variant="secondary">
<a href="/docs">Read the docs</a>
</Button>Icon only
A quiet square button in a row or toolbar. aria-label names the action.
import { IconDots } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
<Button variant="ghost" iconOnly aria-label="More actions">
<IconDots size={16} />
</Button>Glossy
The main action, raised off the page. Use it in place of solid, not next to it.
import { Button } from "@/components/ui/button"
<Button variant="glossy" size="xl">Get started</Button>Disabled
import { Button } from "@/components/ui/button"
<Button disabled>Save</Button>Nên và không nên
Nên
- Use one solid button per view for the main action.
- Use destructive or destructive-soft only for destructive actions, and say what is destroyed: Delete project, not OK.
- Use destructive (solid) for the one main destructive action that can't be undone, such as the confirm button in a Delete project dialog. At most one per view.
- Use destructive-soft for secondary or repeated destructive actions, such as Delete on each table row or in a menu.
- Put the main action last in a button row (Cancel, then Save).
- Use ghost for actions that repeat on every row or sit in a toolbar, so the page is not a wall of boxes.
- Give every iconOnly button an aria-label that names the action (More actions, Close), and use a familiar icon.
- Use glossy instead of solid when the main action should stand off the page, such as the call to action on a landing or empty state. It is still the one main action in its view.
- Use destructive-glossy only where destructive would go: the one main destructive action of a view, in a view that already uses glossy.
Không nên
- Don't restyle colors through className. Pick a variant. If none fits, open an issue instead of overriding it.
- Don't use destructive for warnings or errors that are not an action.
- Don't put destructive and destructive-soft side by side. The solid one loses its weight; pick one per group.
- Don't use a button to navigate. Use asChild with a link so it is a real link.
- Don't use ghost for the main action of a view: without a fill it does not read as the next step. Use solid.
- Don't use iconOnly for an action the icon alone does not make clear. Show the label.
- Don't put glossy and solid in the same view, or use glossy for secondary actions. A raised button reads as the main one; mixing the two looks like two styles, not two levels.
- Don't use the glossy variants in dense UI (tables, toolbars, forms with many actions). The sheen and shadow are for one prominent action.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| variant | enum | solid | secondary | ghost | destructive | destructive-soft | glossy | destructive-glossy | solid | solid: the main action, on the accent. secondary: neutral actions. ghost: neutral actions with no fill or border until hover, for toolbars, icon buttons and actions inside rows. destructive: destructive actions such as Delete, on the red solid with color-text-on-danger (4.53:1). destructive-soft: lighter destructive actions on the soft red fill. glossy: the main action, raised: the accent fill under a sheen lit from above, with inner edges and a med shadow. destructive-glossy: the same raised look on the red solid. |
| size | enum | sm | md | lg | xl | md | Height from size-element-*: sm 28px, md 32px (the default), lg 36px, xl 44px with a mouse. On touch md grows to 36px, lg to 44px and xl to 48px; sm keeps its look and a 44px hit area. Use lg or xl for bigger targets, such as the main action of a mobile screen. Text is 13px in sm, 14px in md and lg, 16px in xl. |
| iconOnly | boolean | - | false | Square button that shows only an icon: as wide as it is tall, no label padding. Requires aria-label (the type enforces it). Pass the icon with the size of the button: 16 in sm, md and lg, 20 in xl. |
| disabled | boolean | - | false | Not interactive. Uses the neutral disabled look for every variant. |
| asChild | boolean | - | false | Render the child element (for example a link) with the button styles instead of a button. Chỉ trên web. |
| type | enum | button | submit | reset | button | Native button type. Chỉ trên web. |
Slot
| Tên | Bắt buộc | Mô tả |
|---|---|---|
| label | có | Short verb or verb phrase, sentence case: Save, Delete project. |
| icon | không | Optional icon before or after the label. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | The button element, or the child element when asChild is set. |
| icon | Optional Tabler icon before or after the label. 16px in sm, md and lg, 20px in xl (DESIGN.md 9.1). Colored by the variant. |
| hitArea | Transparent ::before centered on the root, never smaller than size-target-min (24px on mouse, 44px on touch), so sm stays a 44px touch target. |
| gloss | glossy and destructive-glossy only: a sheen from the highlight layer at the top to the shade layer at the bottom, painted over the fill, plus a highlight edge along the top inside and a shade edge along the bottom. Drawn by the root's gloss-on-<solid> class, under the hover and pressed overlays. |
Khả năng truy cập
Role: button
| Phím | Hành động |
|---|---|
| Tab | Moves focus to the button and shows the focus ring. |
| Enter, Space | Activates the button. |
- Defaults to type="button" so it never submits a form by accident. Pass type="submit" for form submits.
- Disabled uses the native disabled attribute, so the button leaves the tab order and ignores clicks.
- With asChild (for example a link), use aria-disabled instead of disabled. The disabled styles follow it.
- An icon-only button needs an aria-label. With iconOnly the type requires it, so the code does not compile without one.
- Pressed scales the button to scale-pressed. Under prefers-reduced-motion it does not move; the pressed overlay still shows.
- The glossy variants keep the label at 4.5:1 or more over the whole sheen, at rest, hovered and pressed: the theme generator solves the gloss layers for it and fails the build otherwise.
Cài đặt
npx shadcn add https://werewolf-ui.vercel.app/r/button.jsonLệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").