Toggle button

A toggle button is a button that changes its state between "on" and "off" using an icon to represent its current state.

UsageCodeAccessibility
  <sl-toggle-button fill="outline">
    <sl-icon name="far-gear" slot="default"></sl-icon>
    <sl-icon name="fas-gear" slot="pressed"></sl-icon>
  </sl-toggle-button>

When to use

Familiar Actions and UI Element Toggles

Icon-only toggle buttons are ideal for actions that are easily recognizable by users through common icons, such as play/pause, like/unlike, or expand/collapse. These buttons are commonly used in toolbars and media controls where space is limited and quick access to functionalities like muting audio or changing playback states is necessary. They are also useful for toggling UI elements on or off, such as expanding or collapsing a drawer, showing or hiding a menu, or turning a feature on or off within the application interface.

When not to use

Toggling Features or Settings

Users typically expect to see switches when enabling or disabling features. If you use an icon-only button instead, it can confuse users and disrupt the uniformity of the interface. So, in these situations, always opt for a switch component. It provides a clear, intuitive way for users to understand the state of a feature.

Anatomy

ItemNameDescriptionOptional
1ContainerTHTML button elementno
2IconThe outline icon appears in the default state, while the filled icon is displayed when the toggle button is selectedno
3TooltipThe tooltip appears on hover to provide additional information about the toggle button's actionno

Figma Options

With these options, you can tweak the appearance of the toggle button in Figma. They are available in the Design Panel so you can compose the switch to exactly fit the user experience need for the use case you are working on.

ItemOptionsDescription
Typeoutline ghostTo indicate the type of the toggle button
Stateidle hover active DisabledTo indicate the state of the toggle button
Sizesm md lgTo determine the size of the toggle button
SelectedbooleanTo indicate whether the toggle is selected or not
FontAwesomevalueTo specify the name of the Font Awesome icon you wish to use in the toggle button.
Interactive example