Icon Button
A square button for icon-only controls. Shares the same size and variant props as Button, with square geometry and per-size icon glyph scale.
<IconButton aria-label="Search"> <MagnifyingGlass /></IconButton>Usage
import { IconButton } from "@reva/ui";Examples
Sizes
Use the size prop with xs, sm, default, or lg — the same tokens as Button. IconButton applies square dimensions and scales inline SVG icons (12px–20px) to match each step.
<IconButton size="xs" aria-label="Search xs"> <MagnifyingGlass /></IconButton><IconButton size="sm" aria-label="Search sm"> <MagnifyingGlass /></IconButton><IconButton aria-label="Search default"> <MagnifyingGlass /></IconButton><IconButton size="lg" aria-label="Search lg"> <MagnifyingGlass /></IconButton>Variant
IconButton accepts the same variant values as Button.
<IconButton aria-label="Search"> <MagnifyingGlass /></IconButton><IconButton variant="secondary" aria-label="Search"> <MagnifyingGlass /></IconButton><IconButton variant="outline" aria-label="Search"> <MagnifyingGlass /></IconButton><IconButton variant="ghost" aria-label="Search"> <MagnifyingGlass /></IconButton><IconButton variant="destructive" aria-label="Search"> <MagnifyingGlass /></IconButton><IconButton variant="constructive" aria-label="Search"> <MagnifyingGlass /></IconButton>Rounded
Use the rounded-full class for a circular icon-only control (for example, scroll-to-top).
<IconButton variant="outline" className="rounded-full" aria-label="Scroll to top"> <ArrowUp /></IconButton>Loading
Use the loading prop to disable the button and replace the icon with a spinner. Square geometry is preserved across the size ramp.
<IconButton size="xs" loading aria-label="Saving"> <MagnifyingGlass /></IconButton><IconButton size="sm" loading aria-label="Saving"> <MagnifyingGlass /></IconButton><IconButton loading aria-label="Saving"> <MagnifyingGlass /></IconButton><IconButton size="lg" loading aria-label="Saving"> <MagnifyingGlass /></IconButton>Playground
Accessibility
Icon-only buttons have no visible text. Provide an accessible name with aria-label, aria-labelledby, or visible text inside the button (if not icon-only).
Props
| Prop | Description |
|---|---|
size | Optional. xs | sm | default | lg. Default: default. Same tokens as Button; IconButton uses square layout internally. |
loading | Optional boolean. Disables the button and replaces the icon with a spinner. |
| … | All other props match Button (variant, asChild, className, native button attributes, etc.). loadingText is not supported on IconButton. |
See the Button documentation in this section for variant and other Button behaviour.