Komponenter
Alert
Alert gir brukeren informasjon som det er ekstra viktig at de ser og forstår. Komponenten er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig.
React
Trykk Enter for å redigere
const Preview = () => { return <Alert>En beskjed det er viktig at brukeren ser</Alert>; }; render(<Preview />)
Bruk
Eksempel
Endre varsel
I kode endrer du typen varsel ved å endre data-color.
Ikonet er styrt via CSS.
React
Trykk Enter for å redigere
const Variants = () => ( <> <Alert data-color='info'>Dette er en info alert</Alert> <Alert data-color='success'>Dette er en success alert</Alert> <Alert data-color='warning'>Dette er en warning alert</Alert> <Alert data-color='danger'>Dette er en danger alert</Alert> </> ); render(<Variants />)
HTML
For HTML bruker du klassenavnet ds-alert og attributtet data-color for å endre type varsel.
Les over for når du skal bruke role og aria-live.
Les om role og aria-live på tilgjengeligheitssiden for Alert-komponenten.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-alert-background | var(--ds-color-info-surface-tinted) |
| --dsc-alert-border-width | var(--ds-border-width-default) |
| --dsc-alert-border-style | solid |
| --dsc-alert-border-color | var(--ds-color-info-border-default) |
| --dsc-alert-border-radius | var(--ds-border-radius-md) |
| --dsc-alert-icon-color | var(--ds-color-info-text-subtle) |
| --dsc-alert-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E") |
| --dsc-alert-color | var(--ds-color-info-text-default) |
| --dsc-alert-spacing | var(--ds-size-2) |
| --dsc-alert-icon-size | var(--ds-size-7) |
| --dsc-alert-padding-block | var(--ds-size-6) |
| --dsc-alert-padding-inline-end | var(--ds-size-6) |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)