CSS: alert
.instui-alert — An inline message with a status colour bar and a masked status glyph from the shared icon set.
A custom -icon-<name> swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.
Source: alert.css
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
html
<div class="instui-alert -icon-megaphone instui-mb-md">
An alert with the default <code>info</code> color, and a custom icon.
</div>
<div class="instui-alert -color-success">
Congratulations! You're using the "success" color.
</div> Congratulations! You're using the "success" color.
Structure
text
.instui-alert
‹content›
close-button (component, 0..1)flowchart TD
n0[".instui-alert"]:::cssdoc-root
n1[/"‹content›"/]:::cssdoc-slot
n2(["close-button"]):::cssdoc-component
n0 --> n1
n0 -.->|0..1| n2
click n2 "/api/css/close-button.md"
classDef cssdoc-root stroke-width:1px;
classDef cssdoc-part stroke-width:1px;
classDef cssdoc-slot stroke-width:1px;
classDef cssdoc-component stroke-width:1px;
Slots
| Slot | Description |
|---|---|
content | The alert's message content; may include a dismiss button. |
Modifiers
| Modifier | Description |
|---|---|
.-color-danger | An error message. |
.-color-info | Informational (default). |
.-color-success | A positive/confirmation message. |
.-color-warning | A cautionary message. |
.-has-shadow-false | Deprecated — use .-without-shadow. |
.-icon-* | Swap the status glyph for a custom icon (e.g. -icon-megaphone), kept white on the variant's coloured bar. |
.-render-custom-icon-* | Deprecated — The former renderCustomIcon prop; still works as an alias, but use -icon-<name> (or override --pantoken-alert-glyph) instead. |
.-screen-reader-only | Visually hidden but announced. |
.-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 | Remove the default elevation shadow (InstUI hasShadow={false}). |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::after | The white status glyph, masked and centred over the bar. |
::before | The solid variant-coloured status bar, flush to the rounded start edge. |
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. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-component-alert-background | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-alert-border-radius | <length> | 0.75rem |
--instui-component-alert-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-alert-border-width | <length> | 0.125rem |
--instui-component-alert-color | <color> | light-dark(#273540, #ffffff)LightDark |
--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> | 1.5rem |
--instui-component-alert-content-padding-vertical | <length> | 0.75rem |
--instui-component-alert-danger-border-color | <color> | #E62429 |
--instui-component-alert-danger-icon-background | <color> | #E62429 |
--instui-component-alert-icon-color | <color> | #ffffff |
--instui-component-alert-info-border-color | <color> | #2B7ABC |
--instui-component-alert-info-icon-background | <color> | #2B7ABC |
--instui-component-alert-success-border-color | <color> | #03893D |
--instui-component-alert-success-icon-background | <color> | #03893D |
--instui-component-alert-warning-border-color | <color> | #CF4A00 |
--instui-component-alert-warning-icon-background | <color> | #CF4A00 |
--instui-component-base-button-medium-height | <length> | 2.5rem |
--instui-elevation-above | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--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%22m9%2012%202%202%204-4%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-glyph | <url> | — |
Subcomponents
Related
- close-button — The dismiss control an alert may include.