Skip to content

Latest commit

 

History

History
103 lines (56 loc) · 3.01 KB

File metadata and controls

103 lines (56 loc) · 3.01 KB

Modifier Glossary

A glossary of modifiers used by Willow components and links to examples

--active : identifies the current item or page

--close : displays a close icon for global alerts and dialogs

--close-inverse : same as --close but in an inverse color

--cta: use to emphasize a button by making it larger and the primary call to action color

--error : displays an exclamation point icon to signify an error

--error-inverse : same as --error but in an inverse color

--ghost: use for deemphasized actions to create a button outline that is filled with color on hover, focus and active actions

--ghost-inverse: use for deemphasized actions to create a button outline that is filled with color on hover, focus and active actions

--info : displays an information or i symbol to mark something for consideration

--info-inverse : same as --info but in an inverse color

--inline: use to restrict a button's width based on its content

--menu-close : displays a close icon that should only be used on menus

--menu-close-inverse : same as --menu-close but in an inverse color

--menu : displays a collapsed menu icon often called a hamburger

--menu-inverse : same as --menu but in an inverse color

--negative: signifies a negative actions or feedback

--positive: signifies a positive actions or feedback

--primary : calls attention to a primary or common action

--sr-only : hides content

--success : displays a checkmark to signify success or completion

--success-inverse : same as --success but in an inverse color

--warning: signifies a warning feedback or displays a yield symbol to signify something that needs attention

--warning-inverse : displays a yield symbol to signify something that needs attention but in an inverse color