Component
IconButton
A button that displays only an icon. Perfect for toolbars, action menus, and compact UI elements.
tsx
import { IconButton } from 'wss3-forge'Usage
•
Use for actions where the icon is self-explanatory
•
Always add a title/tooltip for accessibility
•
Use ghost variant for minimal visual weight
•
Use subtle variant when button needs a background
•
Use danger variant for destructive actions
Examples
Variants
tsx
1<HStack gap="sm">2 <IconButton icon={<Settings20Regular />} variant="ghost" title="Settings" />3 <IconButton icon={<Edit20Regular />} variant="subtle" title="Edit" />4 <IconButton icon={<Delete20Regular />} variant="danger" title="Delete" />5</HStack>Sizes
tsx
1<HStack gap="sm" style={{ alignItems: 'center' }}>2 <IconButton icon={<Heart20Regular />} size="xs" title="Like" />3 <IconButton icon={<Heart20Regular />} size="sm" title="Like" />4 <IconButton icon={<Heart20Regular />} size="md" title="Like" />5 <IconButton icon={<Heart20Regular />} size="lg" title="Like" />6</HStack>Toolbar Example
tsx
1<Card padding="sm">2 <HStack gap="xs">3 <IconButton icon={<Edit20Regular />} variant="ghost" title="Edit" />4 <IconButton icon={<Share20Regular />} variant="ghost" title="Share" />5 <IconButton icon={<Bookmark20Regular />} variant="ghost" title="Bookmark" />6 <IconButton icon={<MoreHorizontal20Regular />} variant="ghost" title="More" />7 </HStack>8</Card>Disabled State
tsx
1<IconButton icon={<Delete20Regular />} disabled title="Delete" />Previous
GradientButton
Next
Card
Last updated: December 2025