IconButton
IconButton triggers an action with an icon instead of a text label.
Source
LLM docs
Package
Examples
2
Properties
51
Playground
Basics
IconButton triggers an action with an icon instead of a text label.
Loading demo…
import { IconButton, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" align="center" wrap="wrap">
<IconButton icon="home" tooltip="Home" />
<IconButton icon="bell" variant="filled" tooltip="Notifications" />
<IconButton icon="heart" variant="secondary" tooltip="Favorite" />
<IconButton icon="settings" variant="outline" tooltip="Settings" />
<IconButton icon="search" variant="ghost" tooltip="Search" />
<IconButton icon="star" variant="gradient" tooltip="Star" />
</Row>
);
}Variants
Compare every IconButton visual variant with the same icon and size.
Loading demo…
import { IconButton, Row } from '@plocks/ui';
const variants = ['default', 'filled', 'secondary', 'outline', 'ghost', 'gradient', 'none'] as const;
export function Demo() {
return (
<Row gap="sm" align="center" wrap="wrap">
{variants.map(variant => (
<IconButton key={variant} icon="heart" variant={variant} accessibilityLabel={`${variant} icon button`} tooltip={variant} />
))}
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources