Icon Button
A Button that shows only an icon, with a required accessible label and a tooltip-ready target.
<IconButton label="Refresh" variant="secondary">
<RefreshIcon />
</IconButton>Props
variant
size
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/icon-button.jsonThe CLI writes components/ikada/icon-button.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Button and Tooltip. Or take it from the package: import { IconButton } from "@sproutboat/ikada";
Usage
import { IconButton } from "@/components/ikada/icon-button";
<IconButton label="Refresh" variant="secondary">
<RefreshIcon />
</IconButton>Examples
<IconButton label="Refresh" variant="primary">
<RefreshIcon />
</IconButton>
<IconButton label="Copy" variant="secondary">
<CopyIcon />
</IconButton>
<IconButton label="More">
<MoreIcon />
</IconButton>
<IconButton label="Delete" variant="danger">
<TrashIcon />
</IconButton><IconButton label="Refresh (sm)" size="sm" variant="secondary">
<RefreshIcon />
</IconButton>
<IconButton label="Refresh (md)" size="md" variant="secondary">
<RefreshIcon />
</IconButton>
<IconButton label="Refresh (lg)" size="lg" variant="secondary">
<RefreshIcon />
</IconButton><IconButton label="Copy deploy URL" tooltip={false}>
<CopyIcon />
</IconButton><IconButton label="Delete" variant="danger" disabled>
<TrashIcon />
</IconButton>Props
| Prop | Type | Description |
|---|---|---|
| labelrequired | string | Required. Becomes the accessible name and the tooltip text. |
| childrenrequired | ReactNode | The icon. The accessible name comes from `label`. |
| tooltip | boolean | Set false when a parent already explains the button. Default `true`. |
| className | string | Classes merged onto the root element, after ikada's own. |
| 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 | Default `ghost`. |
| size | "sm" | "md" | "lg" | null | — |
| loading | boolean | Shows a spinner, sets aria-busy, ignores clicks, keeps the width and focus. |
Also takes every prop of Omit<ButtonProps, "children" | "aria-label">.
Source: src/components/icon-button.tsx