Button Icon
A button icon is a circular button that contains only an icon. The interaction with a button icon is defined by its icon and its surrounding context, not within button text. The color system for a button icon is the same as the button component, with a few exceptions.
Anatomy
Legend
- Border
- Background fill
- Icon
Options
Sizing
Button icons come in two sizes: small and default.
Icon size
All icon sizes supported in the button icon.
Border
Button borders can be toggled on or off.
Color
Button icons follow the same color schemes as our buttons. To see all color themes see our color tokens.
Icon
Any icon supported in our Icon tokens can be used.
Behaviors
Hover Active & Default
Button icons follow the same color theme logic as our as our buttons. Note: To see all color themes, please see our color tokens
Tab behavior
Button icons can be tabbbed through using the keyboard.
Usage guidelines
Avoid pairing large icon in small button icon
While the button icon accepts supported icon sizes, large icons do not work with button icons.
Ambiguous icons
Do not use icons in button icons that leave the user unsure of its action. The button icon should be clear and actionable; otherwise, a standard button should be used.+
Group Spacing
When a group button icons are needed, spacing between should use 8px spacing.
Specs
Size
Size of small button icon is 32px to meet the minimal tap target. The medium is 40px. Icon is aligned vertically and horizontally center.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)