Alert beta

Communicates important information about the state of the entire application or surface. For example, the status of a page, panel, dialog or card. The information shouldn’t require someone to take immediate action, but should persist until the user performs one of the required actions.

Default alert

<ch-alert open>Message bar content</ch-alert>

Default alert

Use the dismissible attribute to add a close button to the alert.

<ch-alert open dismissible>Message bar content</ch-alert>

Animations

Use the --alert-transition css property to customize the alert transition of showing and hiding the alert.

<div class="animations">
  <ch-button class="btn">Toggle alert</ch-button>
  <ch-alert dismissible>Message bar content</ch-alert>
</div>
<script type="module">
  const component = document.querySelector('.animations [alert]');
  const button = document.querySelector('.animations .btn');
  button.addEventListener('click', () => component.toggle());
</script>

Heading

Use the heading attribute or slot to add a heading to the alert.

<ch-alert open dismissible heading="Heading">Message bar content</ch-alert>

Actions

Use the action slot to add controls to the message bar.

<ch-alert open dismissible heading="Heading">
  Message bar content
  <ch-button slot="action">Action1</ch-button>
  <ch-button slot="action">Action2</ch-button>
</ch-alert>

API