ButtonDemo,
ButtonVariants,
ButtonSizes,
ButtonIcons,
ButtonLoading,
ButtonDisabled,
ButtonFullWidth,
} from "@/examples/button";
# Button
Triggers an action — submitting a form, opening a dialog, saving a change. Use a link instead when the result is navigation.
```tsx
```
## Import
```tsx
import { Button } from "@meridui/react";
```
## Examples
### Variants
`primary` is the single accent action on a screen. `secondary` (the default) is for everything else; `ghost` sits quietly in toolbars and dense rows; `danger` confirms destructive actions; `link` looks like inline text but keeps button semantics.
```tsx
```
### Sizes
`sm` is 36px, `md` 44px (default) and `lg` 50px tall. Match the size of neighbouring inputs so a row of controls shares one baseline.
```tsx
```
### With icons
`leadingIcon` and `trailingIcon` take any node. They are wrapped in `aria-hidden` spans, so the label alone names the button.
```tsx
}>New project
}>Continue
}>Delete
```
### Loading
`loading` overlays a spinner, keeps the button's width so the layout does not jump, sets `aria-busy` and `aria-disabled`, and swallows clicks. The button stays focusable, so keyboard focus is not lost mid-request.
```tsx
const [saving, setSaving] = useState(false);
```
### Disabled
`disabled` is the native attribute: the button leaves the tab order and ignores clicks. Prefer explaining why an action is unavailable over silently disabling it.
```tsx
```
### Full width
`fullWidth` stretches the button to its container — useful in narrow forms and on mobile.
```tsx
```
### As a router link
Use `asChild` to render your router's link with button styling, so navigation stays a real link:
```tsx
import Link from "next/link";
```
## API reference
`Button` forwards its ref to the `