ComponentsActions
Button
Triggers an action. Five variants, four sizes, loading state and asChild for links.
Theme
Motion
Triggers an action. Five variants, four sizes, loading state and asChild for links.
<Button>Save changes</Button>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Button } from "junco";
<Button onClick={save}>Save changes</Button>
<Button variant="outline">Cancel</Button>
<Button isLoading>Saving</Button>Solid marks the one primary action on a screen. Everything else is quieter.
isLoading disables the button, shows a spinner and sets aria-busy. Click to try it.
asChild renders your element (a link, a router Link) with button styles.
Button#Also takes every native <button> attribute.
variantsizeisLoadingasChildclassName| Prop | Type | Default |
|---|---|---|
variantVisual weight. Use solid once per view for the main action. | "solid" | "outline" | "soft" | "ghost" | "danger" | "solid" |
sizeHeight and padding. icon is square; give it an aria-label. | "sm" | "md" | "lg" | "icon" | "md" |
isLoadingShows a spinner, disables the button and sets aria-busy. | boolean | false |
asChildRender the child element instead of a <button>, merging props and styles. | boolean | false |
classNameExtra classes. Conflicting utilities override the defaults. | string | – |
| Key | Action |
|---|---|
| Enter | Activates the button. |
| Space | Activates the button. |
| Tab | Moves focus to the next control. Disabled and loading buttons are skipped. |