`IconButton` is a button component specifically designed for displaying icons with proper accessibility and interaction states.

Features:

- Multiple visual variants for different contexts - Support for all button states (active, focused, loading, disabled) - Size options for different UI densities - Built-in tooltip support - Can be rendered as other elements via `asChild` - Group capability via IconButtonGroup for related actions

Usage Guidelines:

- Use for actions where an icon clearly communicates the purpose - Provide tooltip text for clarity (especially for less common icons) - Group related actions using IconButtonGroup - Choose variants that fit your visual hierarchy

Accessibility:

- Maintains focus states for keyboard navigation - Supports ARIA attributes for screen readers - Tooltip provides additional context for icon meaning Basic: Demonstrates the default IconButton component with an icon.

This minimal example shows how to create a simple icon button with the default styling.

Variants: Demonstrates all visual variants, sizes, and states of the IconButton component.

Features:

- Interactive controls to switch between variants and sizes - Displays all possible states (rest, active, focused, loading, disabled) - Shows consistent styling across all combinations

Variants:

- `default`: Standard styling with hover and active states - `secondary`: Subdued styling for less prominent actions - `solid`: Filled background for primary or important actions - `highlight`: Visually distinctive for drawing attention - `submit`: Submit button styling with theme-aware colors (black/white background)

Sizes:

- `default`: Standard size for most interfaces - `large`: Larger size for touch targets or emphasis

Tooltip: Demonstrates adding descriptive tooltips to IconButtons.

Features:

- Helpful text appears on hover/focus - Improves accessibility and usability - Clarifies the button's purpose when icons alone may be ambiguous

Best Practices:

- Use concise, clear tooltip text - Describe the action, not the icon - Consider tooltip placement based on button position

Group: Demonstrates grouping related IconButtons together.

Features:

- Visual grouping of related actions - Consistent styling across grouped buttons - Proper spacing and borders between buttons - Ability to set a common variant for all buttons in the group

Best Practices:

- Group functionally related actions - Maintain a logical order (e.g., create, edit, delete) - Use consistent icons within a UI - Consider adding tooltips to each button in the group

AsChild: Demonstrates rendering the IconButton as another element.

Features:

- Maintains IconButton styling while using different underlying elements - Useful for links, form elements, or custom components - Preserves accessibility features