---
url: /api/css/alert.md
---
# CSS: alert

`.instui-alert` · stable — A status message with floating and inline surface treatments and a masked status glyph from the shared icon set.

Floating is the default, with an elevated coloured surface and on-colour actions. `-inline` uses a pastel surface, no shadow, status-coloured glyph, standard close button, primary action, and tertiary secondary action. A single direct action button forms a row after unwrapped text; wrap two actions in `.button-group`, where they become secondary then primary. Any button modifier opts out of this automatic variant assignment. A direct close button defaults to small; add a size modifier to override it.

**Source:** [alert.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/alert/alert.css)

> \[!TIP]
> **JS Enhancement** — This component's CSS renders and works on its own; pair it with `@pantoken/interactions` to add the interactive behavior. Its `-timeout` modifier is driven by that behavior. See the [modifier table below](#modifiers).

## Accessibility

For an important message, add `role="alert"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.instui-close-button` in the example carries `aria-label="Close"`).

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/alert.css";
```

## Examples

-nocard

```html
<div class="instui-alert -icon-megaphone --mb-md">
  An alert with the default info color, and a custom icon.
</div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  An alert with the default info color, and a custom icon.
</div>
<div class="instui-alert -color-success --mb-md">
  Congratulations! You're using the "success" color.
    <button class="instui-button">Ok</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Congratulations! You're using the "success" color.
    <button class="instui-button">Ok</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Oops! You're using the "error" color.
  <div class="button-group">
    <button class="instui-button">Cancel</button>
    <button class="instui-button">Ok</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  Oops! You're using the "error" color.
  <div class="button-group">
    <button class="instui-button">Cancel</button>
    <button class="instui-button">Ok</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  Watch out! You're using the "warning" color.
  <div class="button-group">
    <button class="instui-button">Cancel</button>
    <button class="instui-button">Ok</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  Watch out! You're using the "warning" color.
  <div class="button-group">
    <button class="instui-button">Cancel</button>
    <button class="instui-button">Ok</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
```

## Structure

```text
.instui-alert
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)
```

```mermaid
flowchart TD
  n0[".instui-alert"]:::cssdoc-root
  n1[/"‹content›"/]:::cssdoc-slot
  subgraph sg2
  subgraph sg3 ["bare-button"]
  n4["@component button (0..1)"]:::cssdoc-root
  end
  subgraph sg5 ["button-group"]
  n6[".button-group"]:::cssdoc-root
  n7(["button"]):::cssdoc-component
  end
  end
  n8(["close-button"]):::cssdoc-component
  n0 --> n1
  n6 -->|1..2| n7
  n0 --> sg2
  n0 -.->|0..1| n8
  click n7 "/api/css/button.md"
  click n8 "/api/css/close-button.md"
  classDef cssdoc-root fill:#eef2ff,stroke:#6366f1,color:#1e1b4b;
  classDef cssdoc-part fill:#f8fafc,stroke:#94a3b8,color:#0f172a;
  classDef cssdoc-slot fill:#f0fdf4,stroke:#4ade80,color:#14532d;
  classDef cssdoc-component fill:#fff7ed,stroke:#fb923c,color:#7c2d12;
```

## Slots

| Slot | Description |
| --- | --- |
| `content` | The alert's message content; may include a dismiss button. |

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-color-danger` | An error message. |
| `.-color-error` | Alias — maps to `.-color-danger`. |
| `.-color-info` | Informational (default). |
| `.-color-success` | A positive/confirmation message. |
| `.-color-warning` | A cautionary message. |
| `.-has-shadow-false` | Alias — maps to `.-without-shadow`. |
| `.-icon-*` | Swap the status glyph for a custom icon (e.g. `-icon-megaphone`). |
| `.-inline` | A non-elevated pastel surface for placement in document flow. |
| `.-screen-reader-only` | Visually hidden but announced. |
| `.-timeout` | Interaction — The alert will automatically dismiss after a default of 5 seconds. |
| `.-timeout-1` | One second before automatic dismissal. |
| `.-timeout-2` | Two seconds before automatic dismissal. |
| `.-timeout-3` | Three seconds before automatic dismissal. |
| `.-timeout-4` | Four seconds before automatic dismissal. |
| `.-timeout-5` | Five seconds before automatic dismissal. |
| `.-variant-error` | Deprecated — use `.-color-danger`. |
| `.-variant-info` | Deprecated — use `.-color-info`. |
| `.-variant-success` | Deprecated — use `.-color-success`. |
| `.-variant-warning` | Deprecated — use `.-color-warning`. |
| `.-without-shadow` | Deprecated — use `.-inline`. |

## Parts

| Part | Description |
| --- | --- |
| `.button-group` | The row container for two action buttons. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::after` | The status glyph, masked and padded independently from the content. |
| `::before` | — |

## States

| State | Description |
| --- | --- |
| `[aria-disabled="true"]` | — |
| `:disabled` | — |

## Custom properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--pantoken-alert-glyph` | `<url>` | — | The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG). |
| `--pantoken-alert-icon-bg` | `<color>` | — | The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own. |
| `--timeout` | `<integer>` | — | Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-color-background-interactive-action-primary-active` | `<color>` | `light-dark(#061C30, #D5E2F6)` |
| `--instui-color-background-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-background-interactive-action-primary-hover` | `<color>` | `light-dark(#234465, #ffffff)` |
| `--instui-color-drop-shadow-shadow-color1` | `<color>` | `light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))` |
| `--instui-color-icon-base` | `<color>` | `light-dark(#273540, #ffffff)` |
| `--instui-color-icon-error` | `<color>` | `light-dark(#C51F22, #FA917F)` |
| `--instui-color-icon-info` | `<color>` | `light-dark(#2369A4, #7FB4F1)` |
| `--instui-color-icon-on-color` | `<color>` | `#ffffff` |
| `--instui-color-icon-success` | `<color>` | `light-dark(#017533, #61C378)` |
| `--instui-color-icon-warning` | `<color>` | `light-dark(#664800, #E0A300)` |
| `--instui-color-stroke-interactive-action-primary-active` | `<color>` | `light-dark(#061C30, #D5E2F6)` |
| `--instui-color-stroke-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-stroke-interactive-action-primary-hover` | `<color>` | `light-dark(#234465, #ffffff)` |
| `--instui-color-text-base` | `<color>` | `light-dark(#273540, #F2F4F5)` |
| `--instui-color-text-interactive-action-primary-base` | `<color>` | `light-dark(#ffffff, #1D354F)` |
| `--instui-component-alert-border-radius` | `<length>` | `0.75rem` |
| `--instui-component-alert-border-style` | — | `solid` |
| `--instui-component-alert-border-width` | `<length>` | `0.0625rem` |
| `--instui-component-alert-content-font-family` | `[ <font-family-name> \| <generic-font-family> ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` |
| `--instui-component-alert-content-font-size` | `<length>` | `1rem` |
| `--instui-component-alert-content-font-weight` | `<integer>` | `400` |
| `--instui-component-alert-content-line-height` | `<percentage>` | `125%` |
| `--instui-component-alert-content-padding-horizontal` | `<length>` | `0.75rem` |
| `--instui-component-alert-content-padding-vertical` | `<length>` | `0.75rem` |
| `--instui-component-alert-danger-background` | `<color>` | `#E62429` |
| `--instui-component-alert-danger-background-inline` | `<color>` | `light-dark(#FFE3DE, #750D0F)` |
| `--instui-component-alert-danger-border-color` | `<color>` | `#E62429` |
| `--instui-component-alert-danger-border-color-inline` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-alert-icon-padding-left` | `<length>` | `0.75rem` |
| `--instui-component-alert-icon-padding-vertical` | `<length>` | `1rem` |
| `--instui-component-alert-info-background` | `<color>` | `#2B7ABC` |
| `--instui-component-alert-info-background-inline` | `<color>` | `light-dark(#DEEBFF, #123E62)` |
| `--instui-component-alert-info-border-color` | `<color>` | `#2B7ABC` |
| `--instui-component-alert-info-border-color-inline` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-alert-success-background` | `<color>` | `#03893D` |
| `--instui-component-alert-success-background-inline` | `<color>` | `light-dark(#CAF4D0, #01451B)` |
| `--instui-component-alert-success-border-color` | `<color>` | `#03893D` |
| `--instui-component-alert-success-border-color-inline` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-alert-warning-background` | `<color>` | `light-dark(#F0C16C, #8C6400)` |
| `--instui-component-alert-warning-background-inline` | `<color>` | `light-dark(#F7E7CF, #4D3600)` |
| `--instui-component-alert-warning-border-color` | `<color>` | `light-dark(#F0C16C, #8C6400)` |
| `--instui-component-alert-warning-border-color-inline` | — | `color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)` |
| `--instui-component-base-button-medium-height` | `<length>` | `2.5rem` |
| `--instui-component-base-button-primary-disabled-background-color` | `<color>` | `light-dark(#C7CACD, #4A5B68)` |
| `--instui-component-base-button-primary-disabled-border-color` | `<color>` | `light-dark(#C7CACD, #4A5B68)` |
| `--instui-component-base-button-primary-disabled-text-color` | `<color>` | `light-dark(#F2F4F5, #273540)` |
| `--instui-component-base-button-primary-ghost-active-background` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)` |
| `--instui-component-base-button-primary-ghost-border-color` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)` |
| `--instui-component-base-button-primary-ghost-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-base-button-primary-ghost-hover-background` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)` |
| `--instui-component-base-button-primary-inverse-active-background` | `<color>` | `#E2EAF7` |
| `--instui-component-base-button-primary-inverse-background` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-border-color` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-primary-inverse-ghost-active-background` | `<color>` | `rgba(255,255,255,0.1)` |
| `--instui-component-base-button-primary-inverse-ghost-border-color` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-ghost-color` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-ghost-hover-background` | `<color>` | `rgba(255,255,255,0.1)` |
| `--instui-component-base-button-primary-inverse-hover-background` | `<color>` | `#EEF4FD` |
| `--instui-component-base-button-primary-on-color-active-border-color` | `<color>` | `#B6CCEA` |
| `--instui-component-base-button-primary-on-color-active-text-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-primary-on-color-disabled-background-color` | `<color>` | `#8D959F` |
| `--instui-component-base-button-primary-on-color-disabled-border-color` | `<color>` | `#8D959F` |
| `--instui-component-base-button-primary-on-color-disabled-text-color` | `<color>` | `#4A5B68` |
| `--instui-component-base-button-primary-on-color-hover-border-color` | `<color>` | `#D5E2F6` |
| `--instui-component-base-button-primary-on-color-hover-text-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-secondary-on-color-active-border-color` | `<color>` | `#B6CCEA` |
| `--instui-component-base-button-secondary-on-color-active-text-color` | `<color>` | `#ffffff` |
| `--instui-component-base-button-secondary-on-color-disabled-border-color` | `<color>` | `#8D959F` |
| `--instui-component-base-button-secondary-on-color-disabled-text-color` | `<color>` | `#9EA6AD` |
| `--instui-component-base-button-small-font-size` | `<length>` | `0.875rem` |
| `--instui-component-base-button-small-height` | `<length>` | `2rem` |
| `--instui-component-base-button-small-padding-horizontal` | `<length>` | `0.75rem` |
| `--instui-component-base-button-tertiary-active-border-color` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)` |
| `--instui-component-base-button-tertiary-active-text-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-base-button-tertiary-disabled-border-color` | `<color>` | `light-dark(#C7CACD, #4A5B68)` |
| `--instui-component-base-button-tertiary-disabled-text-color` | `<color>` | `light-dark(#AAB0B5, #4A5B68)` |
| `--instui-component-base-button-tertiary-hover-border-color` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)` |
| `--instui-component-base-button-tertiary-hover-text-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-shared-tokens-spacing-gap-buttons` | `<length>` | `0.75rem` |
| `--instui-component-shared-tokens-spacing-general-space-md` | `<length>` | `0.75rem` |
| `--instui-component-text-base-on-color` | `<color>` | `#ffffff` |
| `--instui-drop-shadow-blur-elevation4-dropshadow1` | `<length>` | `12px` |
| `--instui-drop-shadow-spread-elevation4-dropshadow1` | `<length>` | `6px` |
| `--instui-drop-shadow-y-elevation4-dropshadow1` | `<length>` | `8px` |
| `--instui-icon-circle-check` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-icon-circle-x` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-icon-info` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-icon-triangle-alert` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-spacing-space-xs` | `<length>` | `0.25rem` |
| `--pantoken-alert-icon-color` | `<color>` | `#ffffff` |
| `--pantoken-glyph` | `<url>` | `url("data:image/svg+xml` |

## Subcomponents

* [button](/api/css/button.md)
* [close-button](/api/css/close-button.md)

## Related

* [close-button](/api/css/close-button.md) — The dismiss control an alert may include.