Skip to main content

Warning text

When to use this component

Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

How it works

You can use the HTML code snippet in the example above.

You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context. This will be used by screen-readers.

What to avoid

According to the Web Content Accessibility Guidelines (WCAG), certain color combinations, including orange, can pose challenges for individuals with visual impairments or color vision deficiencies.

By refraining from the use of orange color as a primary or prominent color you can ensure better readability and usability for all users, including those who rely on screen readers or have difficulty distinguishing certain color combinations.

Figma Reference

Find more information regarding Warning Text in Figma Community File


We'd love your feedback
Was this helpful?