Overview
Opacity can be used to style elements and communicate different states, like deactivated.
Tokens
| Token | Value |
|---|---|
| opacity-0 | 0 (0%) |
| opacity-25 | 0.25 (25%) |
| opacity-50 | 0.5 (50%) |
| opacity-100 | 1.0 (100%) |
Accessibility
When using opacity make sure that UI element like text or icons are still readable and don’t hinder the user in reaching the next step of his journey.