Figma alert components | Untitled UI
Alert design in Figma: colors, banners, and messages that stay put
How these alert components are built in Figma, and where each of the six colors belongs on a page.
An alert is the message that does not go away. A trial ending in three days, a payment method that failed last night, a workspace stuck in read-only while an import finishes: all of them belong in the page, above the thing they affect, until somebody deals with them.
That permanence is the entire difference between this component and the ones that slide into a corner and leave.
Alert or notification
The two words get swapped around freely and they should not be. An alert is inline and persistent, anchored to the page or section it describes, and it waits. A notification is transient, arrives in a corner, and dismisses itself.
The W3C's alert pattern makes the same case from the accessibility side, noting that an alert should not disappear on its own, since anyone reading slowly or listening to a screen reader needs the message to still be there. One rule follows from that: if the message contains something the user has to act on, it must not be able to vanish while they look away.
Banners handle the promotional cousin of this pattern, which is a different job with different rules, and anything that must block the interface until it is answered is a modal rather than an alert.
Six colors doing semantic work
The color property covers default, brand, gray, error, warning, and success. Error and warning are the pair to be disciplined about: error means something failed or will fail without intervention, warning means proceed carefully. Teams that use red for both end up with users who have learned to ignore red, and that habit is expensive to reverse.
Color also cannot carry the meaning alone, since the red you chose is not red to everyone looking at it, so the heading has to say plainly what happened. Gray and default exist for messages that carry no state at all, which is a larger share of them than most designers expect.
Floating card or full-width banner
The size property is really about scope. The floating version is a contained card, 1,216px on desktop and 343px on mobile, meant to sit inside a content column beside whatever it refers to. The full-width version runs the whole 1,440px desktop frame and 375px on mobile, edge to edge, which is right for anything affecting the entire session: billing, an outage, scheduled maintenance.
Reaching for the full-width banner to carry a section-level message is the most common misuse of this component. It is loud by design, and volume spent on small news is volume you no longer have when the news is big.
Wording, and being heard
An alert is mostly copy. Nielsen Norman Group's error message guidelines put placement first, close to whatever caused the problem, and plain language second, which rules out most of what a backend hands you. Say what happened, then what to do next, and keep the action in a button rather than buried in the sentence.
On the build side, an alert appearing after the page has loaded needs to be announced without stealing focus, which is exactly what WCAG's status messages criterion asks for. Skip that and a keyboard user discovers the failed payment whenever they happen to tab past it.
When it's time to build, the same alerts exist in code. Untitled UI React alerts are open source, built with Tailwind CSS and React Aria, with dismissal and the live region semantics handled for you.
FAQs
Frequently asked questions
Common questions about the Untitled UI Figma alert components, covering colors, banners, and wording.
What is the difference between an alert and a toast notification?
Persistence and placement. An alert sits in the page next to what it describes and stays until it is dismissed or the condition clears. A toast notification appears in a corner and removes itself after a few seconds.
Anything the user must read or act on goes in an alert, because a toast is a message you are allowed to miss.
Should alerts be dismissible?
Informational ones, yes. An alert describing an unresolved state should not be: if the payment is still failing, letting someone close the notice only hides the problem until it gets worse.
A good compromise is dismissible with the alert returning on the next session, which keeps the page tidy without pretending the issue went away.
Where should an alert sit on the page?
As close to what it describes as the layout allows. Form errors go beside the field, section messages sit at the top of the section, and only account or system level messages earn the full-width banner at the top of the page.
An alert at the top of a long page about something at the bottom is a message most people will never connect to its cause.
Are these alert components included in the free version?
The alerts are part of the paid Untitled UI Figma kit. See pricing for the full contents.
The 100% free Figma UI kit includes core components from the same system if you want to test the foundations first.
Is there a React version of these alerts?
Yes. Untitled UI React alerts are open source, built with Tailwind CSS and React Aria.
They mirror these Figma components across the same colors and layouts.
Figma UI components
Foundation Figma components and styles
Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.
\ \ Color styles \ \ 333 styles](/content/components/color-styles/index.html)
\ \ Typography styles \ \ 44 styles](/content/components/typography-styles/index.html)
\ \ Logos \ \ 3 components + 372 variants](/content/components/logos/index.html)
\ \ Icons \ \ 1,993 components + 352 variants](/content/components/icons/index.html)
\ \ Shadows & blurs \ \ 18 styles](/content/components/shadows-blurs/index.html)
\ \ Grids & spacing \ \ 38 variants + 8 styles](/content/components/grids-spacing/index.html)
\ \ File type icons \ \ 1 component + 153 variants](/content/components/file-icons/index.html)
\ \ Social icons \ \ 1 component + 102 variants](/content/components/social-icons/index.html)
\ \ Folder icons \ \ 1 component + 8 variants](/content/components/folder-icons/index.html)
\ \ Payment icons \ \ 1 component + 112 variants](/content/components/payment-icons/index.html)
\ \ Country flag icons \ \ 261 components + 783 variants](/content/components/flag-icons/index.html)
\ \ Integration icons \ \ 1 component + 32 variants](/content/components/integration-icons/index.html)
\ \ Cursors \ \ 1 component + 50 variants](/content/components/cursors/index.html)
Figma UI components
Figma base components
Buttons, inputs, avatars—all of the base components you need for modern product design and websites.
\ \ Avatars \ \ 280 variants + 98 styles](/content/components/avatars/index.html)
\ \ Badges \ \ 3 components + 666 variants](/content/components/badges/index.html)
\ \ Button groups \ \ 2 components + 64 variants](/content/components/button-groups/index.html)
\ \ Buttons \ \ 5 components + 940 variants](/content/components/buttons/index.html)
\ \ Checkboxes \ \ 2 components + 72 variants](/content/components/checkboxes/index.html)
\ \ Context menus \ \ 2 components + 32 variants](/content/components/context-menus/index.html)
\ \ Dropdowns \ \ 4 components + 143 variants](/content/components/dropdowns/index.html)
\ \ Inputs \ \ 7 components + 188 variants](/content/components/inputs/index.html)
\ \ Multi-select \ \ 4 components + 21 variants](/content/components/multi-select/index.html)
\ \ Progress indicators \ \ 2 components + 65 variants](/content/components/progress-indicators/index.html)
\ \ Radio groups \ \ 2 components + 168 variants](/content/components/radio-groups/index.html)
\ \ Select \ \ 6 components + 90 variants](/content/components/select/index.html)
\ \ Sliders \ \ 2 components + 39 variants](/content/components/sliders/index.html)
\ \ Tags \ \ 4 components + 210 variants](/content/components/tags/index.html)
\ \ Toggles \ \ 2 components + 64 variants](/content/components/toggles/index.html)
\ \ Tooltips \ \ 2 components + 84 variants](/content/components/tooltips/index.html)
Figma UI components
Shared Figma assets
Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.
\ \ 404 page headers \ \ 1 component + 28 variants](/content/components/404-page-headers/index.html)
\ \ Banners \ \ 1 component + 40 variants](/content/components/banners/index.html)
\ \ Credit cards \ \ 1 component + 13 variants](/content/components/credit-cards/index.html)
\ \ Design annotations \ \ 7 components + 38 variants](/content/components/design-annotations/index.html)
\ \ Device mockups \ \ 7 components + 18 variants](/content/components/device-mockups/index.html)
\ \ Email templates \ \ 3 components + 22 variants](/content/components/email-templates/index.html)
\ \ Forgot password headers \ \ 1 component + 10 variants](/content/components/forgot-password-headers/index.html)
\ \ Log in page headers \ \ 1 components + 32 variants](/content/components/log-in-headers/index.html)
\ \ Miscellaneous assets \ \ 3 components + 50 variants](/content/components/miscellaneous-assets/index.html)
\ \ Portfolio mockups \ \ 6 variants + 52 templates](/content/components/portfolio-mockups/index.html)
\ \ Sign up page headers \ \ 1 component + 42 variants](/content/components/sign-up-headers/index.html)
\ \ Verification page headers \ \ 1 component + 6 variants](/content/components/verification-headers/index.html)
\ \ Video players \ \ 3 components + 36 variants](/content/components/video-players/index.html)
Figma UI components
Application UI/Dashboard examples
Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.
\ \ Dashboard examples \ \ 60 page examples](/content/components/dashboards/index.html)
\ \ Informational page examples \ \ 60 page examples](/content/components/informational-pages/index.html)
\ \ Settings page examples \ \ 42 page examples](/content/components/settings-pages/index.html)
Figma UI components
Application UI/Dashboard Figma components
Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.
\ \ Activity feeds \ \ 2 components + 22 variants](/content/components/activity-feeds/index.html)
\ \ Activity gauges \ \ 3 components + 34 variants](/content/components/activity-gauges/index.html)
\ \ Alerts \ \ 1 component + 24 variants](/content/components/alerts/index.html)
\ \ Application header navigations \ \ 5 components + 80 variants](/content/components/application-header-navigations/index.html)
\ \ Breadcrumbs \ \ 2 components + 56 variants](/content/components/breadcrumbs/index.html)
\ \ Calendars \ \ 12 components + 82 variants](/content/components/calendars/index.html)
\ \ Card headers \ \ 1 component + 4 variants](/content/components/card-headers/index.html)
\ \ Carousels \ \ 4 components + 22 variants](/content/components/carousels/index.html)
\ \ Code snippets \ \ 1 component + 8 variants](/content/components/code-snippets/index.html)
\ \ Color pickers \ \ 6 components + 26 variants](/content/components/color-pickers/index.html)
\ \ Command menus (⌘+K) \ \ 5 components + 69 variants](/content/components/command-menus/index.html)
\ \ Content dividers \ \ 1 component + 18 variants](/content/components/content-dividers/index.html)
\ \ Date pickers \ \ 5 components + 68 variants](/content/components/date-pickers/index.html)
\ \ Drawers \ \ 2 components + 50 variants](/content/components/drawers/index.html)
\ \ Empty states \ \ 2 components + 36 variants](/content/components/empty-states/index.html)
\ \ File uploaders \ \ 3 components + 23 variants](/content/components/file-uploaders/index.html)
\ \ Filters \ \ 3 components + 38 variants](/content/components/filters/index.html)
\ \ Horizontal tabs \ \ 2 components + 280 variants](/content/components/horizontal-tabs/index.html)
\ \ Inline CTAs \ \ 1 component + 14 variants](/content/components/inline-ctas/index.html)
\ \ Line & bar charts \ \ 9 components + 116 variants](/content/components/line-bar-charts/index.html)
\ \ Loading indicators \ \ 1 component + 12 variants](/content/components/loading-indicators/index.html)
\ \ Messaging \ \ 3 components + 42 variants](/content/components/messaging/index.html)
\ \ Metrics \ \ 4 components + 36 variants](/content/components/metrics/index.html)
\ \ Modals \ \ 3 components + 252 variants](/content/components/modals/index.html)
\ \ Notifications \ \ 1 component + 18 variants](/content/components/notifications/index.html)
\ \ Page headers \ \ 1 component + 12 variants](/content/components/page-headers/index.html)
\ \ Pagination \ \ 3 components + 42 variants](/content/components/pagination/index.html)
\ \ Pie charts \ \ 3 components + 68 variants](/content/components/pie-charts/index.html)
\ \ Progress circles \ \ 1 component + 10 variants](/content/components/progress-circles/index.html)
\ \ Progress steps \ \ 7 components + 92 variants](/content/components/progress-steps/index.html)
\ \ Radar charts \ \ 3 components + 12 variants](/content/components/radar-charts/index.html)
\ \ Section footers \ \ 1 component + 8 variants](/content/components/section-footers/index.html)
\ \ Section headers \ \ 1 component + 12 variants](/content/components/section-headers/index.html)
\ \ Sidebar navigations \ \ 9 components + 168 variants](/content/components/sidebar-navigations/index.html)
\ \ Tables \ \ 4 components + 204 variants](/content/components/tables/index.html)
\ \ Tree views \ \ 3 components + 4 variants](/content/components/tree-views/index.html)
\ \ Vertical tabs \ \ 2 components + 264 variants](/content/components/vertical-tabs/index.html)
Figma UI components
Marketing website examples
Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.
\ \ 404 page examples \ \ 20 page examples](/content/components/404-pages/index.html)
\ \ About page examples \ \ 20 page examples](/content/components/about-pages/index.html)
\ \ Blog examples \ \ 20 page examples](/content/components/blogs/index.html)
\ \ Blog post examples \ \ 20 page examples](/content/components/blog-posts/index.html)
\ \ Contact page examples \ \ 20 page examples](/content/components/contact-pages/index.html)
\ \ FAQ page examples \ \ 20 page examples](/content/components/faq-page-examples/index.html)
\ \ Landing page examples \ \ 40 page examples](/content/components/landing-pages/index.html)
\ \ Legal page examples \ \ 10 page examples](/content/components/legal-pages/index.html)
\ \ Log in page examples \ \ 12 page examples](/content/components/log-in-pages/index.html)
\ \ Pricing page examples \ \ 20 page examples](/content/components/pricing-pages/index.html)
\ \ Sign up page examples \ \ 12 page examples](/content/components/sign-up-pages/index.html)
\ \ Team page examples \ \ 20 page examples](/content/components/team-pages/index.html)
Figma UI components
Marketing website components
Landing page header and website sections—everything you need to design modern and responsive marketing websites.
\ \ Blog post sections \ \ 3 components + 102 variants](/content/components/blog-post-sections/index.html)
\ \ Blog sections \ \ 4 components + 84 variants](/content/components/blog-sections/index.html)
\ \ Careers sections \ \ 2 components + 38 variants](/content/components/careers-sections/index.html)
\ \ Contact sections \ \ 6 components + 106 variants](/content/components/contact-sections/index.html)
\ \ Content & rich text sections \ \ 2 components + 78 variants](/content/components/content-sections/index.html)
\ \ CTA sections \ \ 1 component + 60 variants](/content/components/cta-sections/index.html)
\ \ FAQ sections \ \ 2 components + 72 variants](/content/components/faq-sections/index.html)
\ \ Features sections \ \ 2 components + 122 variants](/content/components/features-sections/index.html)
\ \ Footers \ \ 5 components + 192 variants](/content/components/footers/index.html)
\ \ Header navigations \ \ 10 components + 397 variants](/content/components/header-navigations/index.html)
\ \ Header sections \ \ 2 components + 148 variants](/content/components/header-sections/index.html)
\ \ Metrics sections \ \ 2 components + 42 variants](/content/components/metrics-sections/index.html)
\ \ Newsletter CTA sections \ \ 1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)
\ \ Press mentions sections \ \ 1 component + 4 variants](/content/components/press-mentions-sections/index.html)
\ \ Pricing sections \ \ 5 components + 88 variants](/content/components/pricing-sections/index.html)
\ \ Social proof sections \ \ 1 component + 20 variants](/content/components/social-proof-sections/index.html)
\ \ Team sections \ \ 2 components + 56 variants](/content/components/team-sections/index.html)
\ \ Testimonial sections \ \ 3 components + 92 variants](/content/components/testimonial-sections/index.html)
The ultimate UI kit for Figma
What is Untitled UI?
Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.
Untitled UI in 60 seconds
The ultimate Figma UI kit | Untitled UI from Untitled UI on Vimeo
Playing in picture-in-picture
Pause
Speed
Picture-in-Picture
Show controls
2x
1.5x
1.25x
1x
0.75x
0.5x
\ Preview in Figma](/content/preview/figma/index.html)
Join 380,000+ designers from the world's top companies
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Sam Pierce Lolla
Founder, Shuffleboard
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
Luca Vavassori
Founder, UXCrush
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Murat Alpay
Product Designer, @imuratalpay
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Jérémy Franck
Designer, @jrmyfranck
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Adham Dannaway
Product Designer, Practical UI
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
Riccardo Buzzotta
Senior Product Designer, Spotify
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
Corey Moen
Senior Brand Designer, Webflow
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
Matt Walker
Design Systems, Mailchimp
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Jenny Chu
Head of Product, Eucalyptus
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
Sunny Trochaniak
Founder, NewPulse Labs
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Dan Mcleay
Lead Designer, Fox Sports
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
Tom Bekkers
Founder & Creative Director, Flowbase
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
Dan Anisse
Co-founder, Relume
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
Abi Tyas Tunggal
Co-founder, Himalayas
Join our affiliate program
A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!
Untitled UI in 60 seconds