Toggle Button Alpha

overview

An accessible, animated toggle button that swaps the icon and text label on click.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--gap

--transition-duration

--icon-size

--button-background-color

--button-background-color-hover

--label-color

--label-color-hover

--icon-color

--icon-color-hover

Accessibility Notes

Ensure you enable the accessibility code block if you use this component with an expanding element like a modal, off-canvas, etc. This will dynamically change the aria-expanded role on the button.
If the button labels you’re using aren’t descriptive, make sure you add an aria-label to the button.
This button should not be used as a navigation link as it’s a button element.
If you edit the class name, make sure you edit the accessibility code block to change how the javascript is targeting the button element.

Related Frames

No related frames.

Related Components

No related components.

FAQs

I changed the class names and now the button isn't working. What happened?
The custom CSS for this button references fixed class names. If you change the name of the classes, you’ll need to update the custom CSS in the Style > CSS area of the button.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.