Icon Button

Icon buttons are compact utility buttons used for actions that don't require text labels. They're perfect for remove, close, edit, and other utility actions.

Overview

Icon buttons are specialized components for utility actions that don't need text labels. They're compact, efficient, and perfect for actions like remove, close, edit, or settings. Unlike regular buttons, icon buttons are designed to be small and unobtrusive.

Variants

Icon buttons come in different variants to match the context and importance of the action. The primary variant uses Circuit Bright Yellow for high-visibility utility actions.

Primary Icon Button

Use primary icon buttons for important utility actions. Features Circuit Bright Yellow background with dark teal icon.

<IconButton variant="primary" size="sm">
  <Trash size={14} weight="light" />
</IconButton>

<IconButton variant="primary" size="md">
  <X size={16} weight="light" />
</IconButton>

<IconButton variant="primary" size="lg">
  <PencilSimple size={18} weight="light" />
</IconButton>

Secondary Icon Button

Use secondary icon buttons for less prominent utility actions. Transparent background with border.

<IconButton variant="secondary" size="sm">
  <Gear size={14} weight="light" />
</IconButton>

<IconButton variant="secondary" size="md">
  <Plus size={16} weight="light" />
</IconButton>

<IconButton variant="secondary" size="lg">
  <PencilSimple size={18} weight="light" />
</IconButton>

Destructive Icon Button

Use destructive icon buttons for remove/delete actions. Red text with subtle hover effects.

<IconButton variant="destructive" size="sm">
  <Trash size={14} weight="light" />
</IconButton>

<IconButton variant="destructive" size="md">
  <X size={16} weight="light" />
</IconButton>

<IconButton variant="destructive" size="lg">
  <Trash size={18} weight="light" />
</IconButton>

Ghost Icon Button

Use ghost icon buttons for subtle utility actions. Minimal styling with brand color.

<IconButton variant="ghost" size="sm">
  <Gear size={14} weight="light" />
</IconButton>

<IconButton variant="ghost" size="md">
  <Plus size={16} weight="light" />
</IconButton>

<IconButton variant="ghost" size="lg">
  <PencilSimple size={18} weight="light" />
</IconButton>

Sizes

Icon buttons come in three sizes to accommodate different contexts and touch target needs. Small is perfect for tight spaces, medium for most use cases, and large for prominent actions.

Size variants

Choose the appropriate size based on the context and importance of the action.

Small:24×24px
Medium:32×32px
Large:40×40px
// Small - 24×24px
<IconButton variant="primary" size="sm">
  <Trash size={14} weight="light" />
</IconButton>

// Medium - 32×32px (default)
<IconButton variant="primary" size="md">
  <Trash size={16} weight="light" />
</IconButton>

// Large - 40×40px
<IconButton variant="primary" size="lg">
  <Trash size={18} weight="light" />
</IconButton>

Usage Guidelines

  • Use icon buttons for utility actions that don't need text labels
  • Primary variant is perfect for important actions like remove/delete
  • Keep icons simple and universally understood
  • Use consistent icon sizes within your interface
  • Provide clear aria-labels for accessibility
  • Choose size based on context - small for tight spaces, large for touch targets
  • Use destructive variant sparingly for actual destructive actions

When to Use

✅ Good Use Cases

  • • Remove/delete items from lists
  • • Close modals or panels
  • • Edit inline content
  • • Settings or configuration
  • • Add items to collections
  • • Toggle visibility states

❌ Avoid

  • • Primary calls to action
  • • Actions that need explanation
  • • Complex multi-step actions
  • • Actions that aren't immediately clear
  • • Replacing text buttons in forms
  • • Navigation between major sections