For Designer

Components/Overlays

Modal

Modals sit on top of the page and ask for one decision or one short task before people carry on

Variants
33
Headers
6
Footers
7

Playground

Mix a header and a footer, then open it for real. Escape, the overlay or Cancel closes it

Modal · Header=Default · Description=true · Align=Left · Footer=Default

Headers

Six header types. Status headers add a tinted icon; Center stacks the icon above the text and drops the close

DefaultTitle and description
Rename projectThe new name shows up for everyone on the team
IconAny icon in an outline box
Share an updatePost a short note to the project feed
ErrorDestructive or failed actions
Delete 3 files?This can’t be undone
WarningRisky actions, like leaving unsaved work
Leave without saving?You have unsaved changes
SuccessConfirm that something worked
Invite sentWe emailed dimas@unictive.com
InfoExplain a setting or a change
Two-step sign-inKeep your account safe

Footers

Seven footers. Default fits most modals; Horizontal and Vertical stretch the buttons for narrow screens

Default
Icon + Text
Link Button
Indicator
Checkbox
Horizontal
Vertical

In context

Three common dialogs. Open each one to see the header, body and footer work together

Error header, Default footer
Warning header, Horizontal footer
Success, centered, Vertical footer

When to use

Use when

  1. People must confirm before something hard to undo, like deleting files
  2. A short task needs focus, like renaming or inviting someone
  3. Leaving now would lose work, and people should choose

Avoid when

  1. The message needs no decision, use an Alert or a toast
  2. The task is long or has many steps, give it its own page
  3. The content belongs next to a control, use a Popover

Do and don’t

Do

Name the button after the action, like “Delete”, so people know exactly what they agree to

Don’t

Don’t ask a question and answer it with “Yes” and “No”, people have to read it twice

Tokens and specs

PropertyTokenValue
Width—480 px
Radius16 px
Fill#FFFFFF
Shadow0 12 32 −12, #0E121B 10%
Overlay#2B303B 24%
Header padding and gap—16 / 20 px, 16 px gap
Header divider#EBEBEB, 1 px
TitleInter Medium 14/20
DescriptionInter Regular 12/16
Icon box—40 px, radius 12, 20 px icon
Icon box, statusstate/*/base icon
Icon box, outlineicon/sub-600 icon
Close16 px
Body padding—16 / 20 px
Footer padding—16 / 20 px, 8 px between buttons
Buttons—Medium Tertiary Neutral + Medium Primary Main
Esc