CSS: alert

.instui-alert · stable — Un message en ligne avec une barre de couleur d’état et un glyphe d’état masqué provenant de l’ensemble d’icônes partagé.

Le mode Floating est le comportement par défaut, avec une surface colorée surélevée et des actions assorties. -inline utilise une surface pastel, sans ombre, un glyphe aux couleurs de statut, un bouton de fermeture standard, une action primaire et une action tertiaire secondaire. Un seul bouton d'action direct forme une rangée après le texte non encapsulé ; enveloppez deux actions dans .button-group, où elles deviennent d'abord secondaires puis primaires. Tout modificateur de bouton exclut cette attribution automatique de variante. Un bouton de fermeture direct est petit par défaut ; ajoutez un modificateur de taille pour le remplacer.

Source: alert.css

TIP

Amélioration JS — Le CSS de ce composant s’affiche et fonctionne de façon autonome ; associez-le à @pantoken/interactions pour ajouter le comportement interactif. Son modificateur -timeout est piloté par ce comportement. Voir la table des modificateurs ci‑dessous.

Accessibilité

Pour un message important, ajoutez role="alert" ou une région aria-live afin que la technologie d’assistance l’annonce ; le contrôle de rejet est un bouton de fermeture étiqueté (l’.instui-close-button dans l’exemple porte aria-label="Close").

Utilisation

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

Exemples

<div class="instui-alert -icon-megaphone --mb-md">
  Une alerte avec la valeur par défaut </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  Une alerte avec la valeur par défaut </div>
<div class="instui-alert -color-success --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <button class="instui-button">D'accord</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <button class="instui-button">D'accord</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <div class="button-group">
    <button class="instui-button">Annuler</button>
    <button class="instui-button">D'accord</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <div class="button-group">
    <button class="instui-button">Annuler</button>
    <button class="instui-button">D'accord</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <div class="button-group">
    <button class="instui-button">Annuler</button>
    <button class="instui-button">D'accord</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  Félicitations! Vous utilisez la couleur "success".
  <div class="button-group">
    <button class="instui-button">Annuler</button>
    <button class="instui-button">D'accord</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Structure

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

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 stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Emplacements

Emplacement	Description
content	Le contenu du message de l’alerte ; peut inclure un bouton de rejet.

Modificateurs

Modificateur	Description
.-color-danger	Un message d’erreur.
.-color-error	Alias — maps to .-color-danger.
.-color-info	Informationnel (par défaut).
.-color-success	Un message positif/de confirmation.
.-color-warning	Un message d’avertissement.
.-has-shadow-false	Alias — maps to .-without-shadow.
.-icon-*	Remplacez le glyphe d’état par une icône personnalisée (p. ex. -icon-megaphone), conservée en blanc sur la barre colorée de la variante.
.-inline	Une surface pastel non surélevée destinée à être placée dans le flux du document.
.-screen-reader-only	Visuellement masqué mais annoncé.
.-timeout	Interaction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1	Une seconde avant la fermeture automatique.
.-timeout-2	Deux secondes avant la fermeture automatique.
.-timeout-3	Trois secondes avant la fermeture automatique.
.-timeout-4	Quatre secondes avant la fermeture automatique.
.-timeout-5	Cinq secondes avant la fermeture automatique.
.-variant-error	Obsolète — use .-color-danger.
.-variant-info	Obsolète — use .-color-info.
.-variant-success	Obsolète — use .-color-success.
.-variant-warning	Obsolète — use .-color-warning.
.-without-shadow	Obsolète — use .-inline.

Parties

Partie	Description
.button-group	Conteneur pour la citation et l'attribution.

Pseudo-éléments

Pseudo-élément	Description
::after	Le glyphe d’état blanc, masqué et centré sur la barre.
::before	—

États

État	Description
[aria-disabled="true"]	—
:disabled	—

Propriétés personnalisées

Propriété	Type	Par défaut	Description
--pantoken-alert-glyph	<url>	—	The low-level status-glyph source; -icon-&lt;name&gt; sets it for you. Override for a custom icon (a url-encoded SVG).
--pantoken-alert-icon-bg	<color>	—	Le remplissage coloré de la barre d’état derrière le glyphe ; chaque variante -color-* définit le sien.
--timeout	<integer>	—	Millisecondes avant la fermeture automatique ; 0 la désactive. Nécessite le bundle d’interaction d’alerte.

Tokens consommés

Token	Type	Valeur
--instui-color-background-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-drop-shadow-shadow-color1	<color>	LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-icon-base	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-color-icon-error	<color>	LightDarklight-dark(#C51F22, #FA917F)
--instui-color-icon-info	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-icon-success	<color>	LightDarklight-dark(#017533, #61C378)
--instui-color-icon-warning	<color>	LightDarklight-dark(#664800, #E0A300)
--instui-color-stroke-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-text-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-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>	LightDarklight-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>	LightDarklight-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>	LightDarklight-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>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-background-inline	<color>	LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-alert-warning-border-color	<color>	LightDarklight-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>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color	<color>	LightDarklight-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>	LightDarklight-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>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color	<color>	LightDarklight-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>	LightDarklight-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

Sous-composants

• button
• close-button

Connexe

• close-button — The dismiss control an alert may include.