Toggle Group
A segmented button that behaves like a toggle.
Variants
Toggle group toggle-group
Basic toggle group
-
<div class="toggle-group"> <a href="#" class="toggle-group__option active"> Toggle option one </a> <a href="#" class="toggle-group__option"> Toggle option two </a> </div>
Usage
When to use
This toggle can be used for binary filters, or other instances where a toggle is required. The items within it can be links that include query params to function as a filter toggle. For example, showing active or inactive objects.
| Class Name | Description |
|---|---|
toggle-group
|
The container of the toggle group |
toggle-group__option
|
An individual option item within the group |
toggle-group__option active
|
The |