Button
The action control: primary (green, one per view), secondary, ghost and danger, in three sizes.
<Button variant="primary">
Plant sprout
</Button>Props
variant
size
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/button.jsonThe CLI writes components/ikada/button.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Button } from "@sproutboat/ikada";
Usage
import { Button } from "@/components/ikada/button";
<Button variant="primary">
Plant sprout
</Button>Examples
<Button variant="primary">primary</Button>
<Button>secondary</Button>
<Button variant="ghost">ghost</Button>
<Button variant="danger">danger</Button><Button size="sm">Size sm</Button>
<Button>Size md</Button>
<Button size="lg">Size lg</Button><Button>Focused</Button><Button variant="primary" loading>
Deploy
</Button><Button variant="primary" disabled>primary</Button>
<Button disabled>secondary</Button>
<Button variant="ghost" disabled>ghost</Button>
<Button variant="danger" disabled>danger</Button>Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| loading | boolean | Shows a spinner, sets aria-busy, ignores clicks, keeps the width and focus. Default `false`. |
| style | CSSProperties | ((state: ButtonState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant | "danger" | "primary" | "secondary" | "ghost" | null | — |
| size | "sm" | "md" | "lg" | null | — |
Also takes every prop of Omit<ComponentProps<typeof BaseButton>, "className">, ButtonVariants.
Source: src/components/button.tsx