Actions

IconButton

Square icon-only button for chrome: canvas controls, vault toggle, menus.

• Always provide label (used for aria-label and the native title).
• variant: ghost (default), surface (floats on the canvas), primary (round, filled). active shows a pressed toggle.
• Prefer size="md" (40px) on touch; sm only inside dense toolbars.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface IconButtonProps {
  icon: IconName;
  label: string;
  variant?: 'ghost' | 'surface' | 'primary';
  size?: 'sm' | 'md' | 'lg';
  active?: boolean;
  onClick?: () => void
}

Use

import { IconButton } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/IconButton/README.md