CSS: alert

.instui-alert · stable — Yon mesaj an liy ak yon ba koulè estati ak yon glif estati kache soti nan seri ikon pataje a.

Floating se default la, ak yon sifas koulè elve ak aksyon ki ann amoni ak koulè a. -inline itilize yon sifas pastèl, pa gen lonbraj, glif koulè-estati, bouton fèmen estanda, aksyon prensipal, ak yon aksyon segondè twazyèmè. Yon sèl bouton aksyon dirèk fòme yon ranje apre tèks ki pa anbalaj; anvlòp de aksyon nan .button-group, kote yo vin segondè epi apre sa prensipal. Nenpòt modifikatè bouton fè w sòti nan atribisyon varyant otomatik sa a. Yon bouton fèmen dirèk gen valè default piti; ajoute yon modifikatè gwosè pou ranplase li.

Source: alert.css

TIP

Amelyorasyon JS — CSS konpozan sa a rann li ak fonksyone pou kont li; pè li ak @pantoken/interactions pou ajoute konpòtman entèraktif la. Modifikatè -timeout li a kondwi pa konpòtman sa a. Gade tab modifikatè anba a.

Aksè

Pou yon mesaj enpòtan, ajoute role="alert" oswa yon zòn aria-live pou teknoloji asistans yo anonse li; kontwòl fèmen an se yon bouton fèmen ki gen etikèt (egzanp nan .instui-close-button pote aria-label="Close").

Itilizasyon

css

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

Egzanp

html

<div class="instui-alert -icon-megaphone --mb-md">
  Yon avètisman ak valè default </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  Yon avètisman ak valè default </div>
<div class="instui-alert -color-success --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <button class="instui-button">Dakò</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <button class="instui-button">Dakò</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <div class="button-group">
    <button class="instui-button">Anile</button>
    <button class="instui-button">Dakò</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <div class="button-group">
    <button class="instui-button">Anile</button>
    <button class="instui-button">Dakò</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <div class="button-group">
    <button class="instui-button">Anile</button>
    <button class="instui-button">Dakò</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  Felisitasyon! Ou ap itilize koulè "success".
  <div class="button-group">
    <button class="instui-button">Anile</button>
    <button class="instui-button">Dakò</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Estrikti

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)

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;

Espas

Espas	Deskripsyon
`content`	Kontni mesaj alam la; ka gen ladan yon bouton pou fèmen li.

Modifikatè

Modifikatè	Deskripsyon
`.-color-danger`	Yon mesaj erè.
`.-color-error`	Alias — maps to `.-color-danger`.
`.-color-info`	Enfòmasyon (default).
`.-color-success`	Yon mesaj pozitif/konfimasyon.
`.-color-warning`	Yon mesaj avètisman.
`.-has-shadow-false`	Alias — maps to `.-without-shadow`.
`.-icon-*`	Ranplase glif estati a ak yon ikon pèsonalize (egzanp `-icon-megaphone`), ki rete blan sou ba koulè varyan an.
`.-inline`	Yon sifas pastèl ki pa elve pou plase nan koule dokiman an.
`.-screen-reader-only`	Vizyèlman kache men anonse.
`.-timeout`	Interaction — The alert will automatically dismiss after a default of 5 seconds.
`.-timeout-1`	Yonn segonn anvan fèmen otomatik.
`.-timeout-2`	De segonn anvan fèmen otomatik.
`.-timeout-3`	Twa segonn anvan fèmen otomatik.
`.-timeout-4`	Katre segonn anvan fèmen otomatik.
`.-timeout-5`	Senki segonn anvan fèmen otomatik.
`.-variant-error`	Depreke — use `.-color-danger`.
`.-variant-info`	Depreke — use `.-color-info`.
`.-variant-success`	Depreke — use `.-color-success`.
`.-variant-warning`	Depreke — use `.-color-warning`.
`.-without-shadow`	Depreke — use `.-inline`.

Pati

Pati	Deskripsyon
`.button-group`	Kontenè pou sitasyon ak atribisyon.

Pseudo-eleman

Pseudo-eleman	Deskripsyon
`::after`	Glif estati blan an, kache epi santre sou ba a.
`::before`	—

Eta

Eta	Deskripsyon
`[aria-disabled="true"]`	—
`:disabled`	—

Pwopriyete koutim

Pwopriyete	Tip	Pa defo	Deskripsyon
`--pantoken-alert-glyph`	`<url>`	—	Sous glif estati ba nivo ki ba a; `-icon-<name>` mete li pou ou. Ranplase li pou yon ikon pèsonalize (yon SVG kòd-url).
`--pantoken-alert-icon-bg`	`<color>`	—	Ranpli ba estati ki gen koulè dèyè glif la; chak varyan `-color-*` fikse pa li menm.
`--timeout`	`<integer>`	—	Milyèm segonn anvan fèmen otomatik; `0` dezaktive li. Mande pake entèraksyon alam la.

Tokens konsome

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

Sou-konpozan

Ki gen rapò

close-button — Kontwòl pou fèmen yon alam ka genyen.

Konpozan

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

Itilite

Règleman

Deklarasyon

Plugins

layout

CSS: alert

Aksè

Itilizasyon

Egzanp

Estrikti

Espas

Modifikatè

Pati

Pseudo-eleman

Eta

Pwopriyete koutim

Tokens konsome

Sou-konpozan

Ki gen rapò

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

CSS: alert ​

Aksè ​

Itilizasyon ​

Egzanp ​

Estrikti ​

Espas ​

Modifikatè ​

Pati ​

Pseudo-eleman ​

Eta ​

Pwopriyete koutim ​

Tokens konsome ​

Sou-konpozan ​

Ki gen rapò ​

CSS: alert

Aksè

Itilizasyon

Egzanp

Estrikti

Espas

Modifikatè

Pati

Pseudo-eleman

Eta

Pwopriyete koutim

Tokens konsome

Sou-konpozan

Ki gen rapò