Alert - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses the div tag with an z-alert HTML custom attribute.

z-alert ​

The z-alert parameter is the main parameter used to render the alert component.

Action card content

The default state of the alert is info. There are four states available: info, alert, negative, and positive.

Action card content

Action card content

Action card content

TIP

You can add a confirm button to the alert component, before the closebutton.

Action card content

Attention!

Make sure to only use two buttons inside the z-alert component. First button it's used for interaction, check the interaction guidelines. Second button will render an X icon, the main goal of the second button is to close the alert.

You can customize the background color of the alert component by using the --z-alert--bg CSS custom property.

Action card content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.5/@zurich/css-components/Alert.css" />
Code
html
<div z-alert="info">
  Alert text
  <button>Okay</button>
  <button></button>
</div>
<div z-alert="alert">
  Alert text
  <button>Okay</button>
  <button></button>
</div>
<div z-alert="negative">
  Alert text
  <button>Okay</button>
  <button></button>
</div>