Skip to content

ComponentsAlert

Components

Alert

cds Banner (v2): every variant is the neutral page-colour card with the banner-line ring and primary text; the icon carries the variant (Info secondary, Warning #fbb315, Warning #dc3c3d). Promo, inline / wrapped / stacked CTA, collapsible details, dismiss, composer placement.

Variants

One line is 44 tall (padding 12 / 16), radius 12; page colour, ring = banner line (light outer 1px 12 %, dark inset 1px white 20 %), text primary, links inherit the colour; 20px icon 8px from the text. Inside covering content ([data-covers-content]) it floats on the popover surface with shadow-panel-md.

neutral · warning · danger
Memory updated. Changes apply to new conversations.
Couldn’t load your projects. Showing the last saved list.
shadcn markup:
AlertTitle + AlertDescription still work (destructive = danger). Links are accented.

Layout

CTA wraps when it doesn't fitdata-cta-layout: inline → wrapped (+16px bottom padding); stacked in the composer.
Your organization’s connector settings changed. Some tools may be unavailable until an admin reconnects them.
Missing session. Start a new task to continue.
Details (collapsible)
Dismissible, centered, no icon
Tip: press ⌘K to search everything.
Centered, no icon.
Promo
Try the new review assistant in your repositories.

Light and dark

Neutral banner
Warning banner
Danger banner
Neutral banner
Warning banner
Danger banner