IconButtons are compact components that combine button functionality with icon clarity, perfect for space-efficient interfaces and universally recognized actions.

Types

IconButtons come in different visual styles to establish hierarchy and meet various interface needs.

Standard

Standard IconButtons provide a subtle interactive area around the icon with hover and focus states. They're ideal for secondary actions that don't need strong visual emphasis.

With Background Color

IconButtons can be styled with background colors to create more prominent interactive elements while maintaining the compact icon-only interface.

Sizes

IconButtons support multiple sizes to accommodate different contexts and touch target requirements.

Small

Small IconButtons (32px) are ideal for dense interfaces and secondary actions where space is limited.

Medium (Default)

Medium IconButtons (40px) provide the standard size, balancing compactness and accessibility.

Large

Large IconButtons (48px) are ideal for primary actions and mobile interfaces where easy touch interaction is essential.

Icon Integration

IconButtons work seamlessly with various icon libraries and custom icons. They support React Icons, Material-UI icons, and custom SVG icons.

Using Sistent Icons

IconButtons work perfectly with Sistent's built-in icon library, maintaining design consistency across your application.

Accessibility

IconButtons include built-in accessibility features but require proper implementation to ensure they're usable by all users.

Essential Properties

  • aria-label: Always provide descriptive labels for screen readers
  • Keyboard navigation: IconButtons are fully keyboard accessible by default
  • Focus indicators: Clear visual focus states for keyboard users
  • Touch targets: Minimum 44px touch targets for mobile accessibility

Best Practice: When using IconButtons, always include meaningful aria-labels or aria-labelledby attributes to describe the action to assistive technologies.