Search…
Search…
Toggle Group
Live in Codebase
Group of toggle buttons for multiple or single selection with icons and accessibility support for toolbar-style interactions.
AA
WCAG 2.1 accessibility compliant
Toggle Group
Live in Codebase
Group of toggle buttons for multiple or single selection with icons and accessibility support for toolbar-style interactions.
AA
WCAG 2.1 accessibility compliant
Toggle Group
Group of toggle buttons for multiple or single selection with icons and accessibility support for toolbar-style interactions.
View Figma Designs
View Figma Designs
View Figma Designs
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Selection Logic |
|---|
Built-in support for single selection (radio) or multiple selection (checkbox) behavior |
Element | Description |
|---|---|
| Bold / Tertiary Button |
| Italic / Tertiary Button |
| Underline / Tertiary Button |
States
Spacing
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Selection Logic |
|---|
Built-in support for single selection (radio) or multiple selection (checkbox) behavior |
Element | Description |
|---|---|
| Bold / Tertiary Button |
| Italic / Tertiary Button |
| Underline / Tertiary Button |
States
Spacing
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Selection Logic |
|---|
Built-in support for single selection (radio) or multiple selection (checkbox) behavior |
Element | Description |
|---|---|
| Bold / Tertiary Button |
| Italic / Tertiary Button |
| Underline / Tertiary Button |
States
Spacing
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.