Button
The button every other Layro component is built with. Primary, secondary, outline, ghost, destructive and link; sm, md and lg sized from the same control scale as inputs and selects, so a button and a field in one row always line up. `asChild` renders a link with button styling.
The decision inside it
Loading keeps the width
A button that shrinks when its label turns into a spinner moves everything beside it. The label stays in the layout, invisible, and the spinner sits over it; `aria-busy` tells a screen reader what happened.
Installation
How you get it
One command. The CLI writes the file into components/ui/ and installs what it needs.
npx shadcn@latest add https://layropro.com/r/buttonAPI
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
variant | ButtonVariant | How much attention the action deserves. Default `primary`. |
size | ControlSize | Matches Input and Select of the same size. Default `md`. |
icon | boolean | Square, for a single icon. Give it an `aria-label` — or use IconButton, which requires one. |
loading | boolean | Shows a spinner in place of the leading icon and marks the button busy. |
asChild | boolean | Render the child element (a link, say) with the button's styling instead of a `<button>`. |
Dependencies
npm packages
@radix-ui/react-slotclsxlucide-reacttailwind-mergeLayro foundations, installed alongside it
layro-themeLifetime access
Every component, and everything we ship next.
- All 65 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.