Button
Button triggers an action: submit a form, open a dialog, confirm a step. Use a
Button for actions and a link for navigation.
Usage
import { Button } from "@sina-design-system/core";
<Button variant="primary" onClick={submit}>Continue</Button>Examples
Variants
Sizes
Icons · left, right, icon-only
Loading & asChild
variant × state
default
loading
disabled
primary
secondary
danger
ghost
variant × size
sm
md
lg
xl
primary
secondary
danger
ghost
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "danger" | "ghost" | "primary" | Visual weight and intent. |
size | "sm" | "md" | "lg" | "xl" | "md" | Control height. |
iconLeft / iconRight | ReactNode | — | A leading or trailing glyph. |
loading | boolean | false | Shows a spinner and disables the button. |
asChild | boolean | false | Render as the child element (e.g. a link) while keeping button styling. |
Accessibility
Native <button> semantics: focusable, Enter/Space activate, and disabled
is announced. An icon-only button needs an aria-label.