Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Icon Toggle
  5. API and Development

Icon Toggle

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
IconToggle swaps between two Icon values to represent on/off or mode changes while reusing tooltip and interactable affordances. Pass className to merge additional classes onto the icon-toggle container (for example, when a parent like Badge needs to size or align the dismiss control).
Props
Storybook
Example
Secondary + pill (FAB toolbar)
Pass the boolean pill prop to opt in to a fully rounded (pill / circular) border radius, intended for floating toolbars and FAB-style controls such as the staff panel FAB toolbar. pill works with any IconToggleType; combine it with type={IconToggleType.Secondary} to reproduce the FAB-toolbar variant (unchecked: Alt icon + hover background; checked: --color-intent-accent-bg fill with --color-icon-base glyph).
Previous
Icon Toggle / Usage
Next
Icon Toggle / Accessibility
On this page
Props
Storybook
Example
Secondary + pill (FAB toolbar)