Actions
Icon button
A square button holding a single icon.
Server safeSource
Import
import { IconButton } from '@the_viveksingh/vivek-ui'Sizes and states
aria-label is required at the type level, not by convention. An icon-only control has no text for a screen reader to announce, so the type system refuses it rather than leaving it to code review.
<IconButton size="sm" aria-label="Add item"><PlusIcon /></IconButton>
<IconButton size="md" aria-label="Add item"><PlusIcon /></IconButton>
<IconButton size="lg" aria-label="Add item"><PlusIcon /></IconButton>
<IconButton loading aria-label="Adding item"><PlusIcon /></IconButton>
<IconButton disabled aria-label="Add item"><PlusIcon /></IconButton>Variants
round swaps the rounded rectangle for a circle.
<IconButton aria-label="Add item"><PlusIcon /></IconButton>
<IconButton variant="outline" aria-label="Add item"><PlusIcon /></IconButton>
<IconButton variant="ghost" aria-label="Add item"><PlusIcon /></IconButton>
<IconButton round variant="outline" aria-label="Add item"><PlusIcon /></IconButton>Props
Generated from the package's own type declarations, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'outline' | 'ghost' | — | — |
size | 'sm' | 'md' | 'lg' | — | — |
loading | boolean | — | — |
round | boolean | — | Round instead of rounded-rectangle. |
'aria-label' required | string | — | Required. An icon-only control has no text for a screen reader to announce, so the accessible name has to come from here — this is the single most common a11y bug in icon buttons, so the type system enforces it. |
Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.
Rendering
Server safe
IconButton carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.