Do use the variant options provided within the component.
Toggle button group
A toggle button group is a single and multi selection pattern that provides increased visual emphasis for the available choices.
- Skin
- CoreUI
- React
Friendly
Toggle button groups are interactive and provide subtle delight to the experience.
Quick
They should be lightweight and easily digestible for the action at hand.
Informative
They should help make decisions easier to scan in order to take action.
- Image
- Title
- Subtitle
- Border
- Container
Single select
Single select allows the user to select one option from a set. Only one can be selected at a time.
Multi-select
Multi-select allows the user to select multiple options from a list or a single yes/no option.
Title
The title is required for every option. Keep titles short and concise.
Subtitle
The subtitle is optional. Use a subtitle to provide more context or details. Aim for 1-2 lines.
Lead element
The lead element is optional. It provides visual support for the available options. There are 2 options for lead elements: Icon and Image.
Layout
Toggle buttons can be presented in 3 variants: Minimal, List view, and Gallery view.
Disabled
Toggle button groups can be disabled in unselected state.
Selection
The selection state toggles on and off for both multi and single select option list styles.
On selection the border color changes to “border.strong” and the background color changes to “background.secondary”.
Learn more about Color tokens.
Size
It is important to ensure you follow the sizing guide for each toggle button variant. The various styles and layouts adhere to different minimum and maximum sizing rules.
Minimal
The minimal layout has a minimum width of 72px and a maximum width is 342px.
List view
List view layouts have a minimum width of 224px and a maximum width of 342px.
Gallery view
Gallery layouts have a a minimum width of 168px and maximum width of 342px.
Small
Medium and large
CTA buttons
Don’t add CTAs or additional buttons to the option list.
Additional controls
Keep content minimal and straight forward.
Don’t add additional controls or selection indicators, such as checkbox, radio button, or checkmark.
Content length
Keep titles to a single line of copy when possible. Subtitles can have more content but should not exceed 3 lines of content.
Avoid lengthy content. Keep your title and subtitle short and concise.
Overflow
The title can wrap to 2 lines for the title-only option. In general, keep your content brief and to the point.
Don’t write overly detailed titles.