Icon Button

Icon-only button. Free, MIT · Basics › Buttons

Installation

npx valyro-cli@latest add icon-button

npx shadcn@latest add https://valyro.xyz/r/icon-button.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { IconButton } from 'valyro-ui';

Prop	Type	Default
`icon` *	`ReactNode`		The icon shown as the button's only content.
`label` *	`string`		Required accessible name (used as aria-label, and as the native title unless wrapped in a Tooltip).
`round`	`boolean`		Circle instead of the theme's default button radius.
`burst`	`boolean`	`false`	On each click the icon pops and a ring of particles bursts out in its colour — confirmation for a like or a favourite (show the new state too, e.g. a filled icon). Skipped under reduced motion.
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'accent' \| 'danger' \| 'link'`	`'ghost'`	Solid `primary`/`accent`/`danger` fill, outlined `secondary`, transparent `ghost`, or unpadded text `link`.
`size`	`'sm' \| 'md' \| 'lg'`		Control height, padding and text size.
`loading`	`boolean`		Shows a spinner and blocks activation without changing the button's width: the spinner takes the left icon's place, or covers the label when there is no left icon. The button stays focusable and gets aria-busy.
`pill`	`boolean`		Fully rounded ends, regardless of theme.
`hoverScale`	`number`		Scale under a hovering mouse, e.g. `1.05`; it springs back with a slight bounce. Off by default (the theme's own hover). Skipped on touch and under reduced motion.
`tapScale`	`number`		Scale while pressed, e.g. `0.95`, instead of the theme's press transform; springs back on release.

Button — Buttons in every variant
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit