Button
Button triggers an action. It renders a native button, or the single child you pass when
you set asChild (Radix Slot), so the same styling can sit on a link.
import { Button } from "@usecredo/ui/button";
Examples
The examples below are the real @usecredo/ui/button component, styled by the real token and
Tailwind stylesheets. The toggle sets data-theme on the example frame only.
Variants
Sizes
Disabled and loading
A loading button shows a spinner, sets aria-busy and ignores activation, but stays focusable.
As a link
API
Generated from the TypeScript declarations of @usecredo/ui/button at build time. Button
also accepts every native button attribute and forwards its ref to the element.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | enum | "default" | Visual style. Maps to the actions and content semantic roles. |
size | enum | "md" | Control size. Use icon for a square, icon-only button and give it an aria-label. |
className | string | - | Extra classes, merged after the variant classes so they win on conflict. |
asChild | boolean | false | Render the single child element instead of a button, merging props onto it (Radix Slot). |
loading | boolean | false | Shows a spinner, sets aria-busy and ignores activation. The button stays focusable (aria-disabled) so assistive technology can still reach it. With asChild no spinner is injected; the state attributes and click blocking still apply. |
Stories
State catalog, keyboard check and accessibility checks live in Storybook.