OLYSENSE Design System

This is a standard alert. You can customize its content and even the icon.

<ods-alert open>
  <ods-icon slot="icon" name="info-circle"></ods-icon>
  This is a standard alert. You can customize its content and even the icon.
</ods-alert>

import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsAlert open>
      <OdsIcon slot="icon" name="info-circle" />
      This is a standard alert. You can customize its content and even the icon.
    </OdsAlert>
  )
}

export default Example;

This is super informative

You can tell by how pretty the alert is.

Your changes have been saved

You can safely exit the app now.

Your session has ended

Please login again to continue.

An error occured while updating

Update your details and try again!.

<div ods-layout='block gap:sm align:inline-stretch'>
  <ods-alert variant="info" open closable>
    <ods-icon slot="icon" name="info-circle"></ods-icon>
    <div ods-layout="block gap:4">
      <p ods-text="semibold">This is super informative</p>
      <p ods-text="content size:md">You can tell by how pretty the alert is.</p>
    </div>
  </ods-alert>

  <ods-alert variant="success" open closable>
    <ods-icon slot="icon" name="check-circle"></ods-icon>
    <div ods-layout="block gap:4">
      <p ods-text="semibold">Your changes have been saved</p>
      <p ods-text="content size:md">You can safely exit the app now.</p>
    </div>
  </ods-alert>

  <ods-alert variant="warning" open closable>
    <ods-icon slot="icon" name="warning"></ods-icon>
    <div ods-layout="block gap:4">
      <p ods-text="semibold">Your session has ended</p>
      <p ods-text="content size:md">Please login again to continue.</p>
    </div>
  </ods-alert>

  <ods-alert variant="error" open closable>
    <ods-icon slot="icon" name="exclamation-circle"></ods-icon>
    <div ods-layout="block gap:4">
      <p ods-text="semibold">An error occured while updating</p>
      <p ods-text="content size:md">Update your details and try again!.</p>
    </div>
  </ods-alert>
</div>

import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <div ods-layout='block gap:sm align:inline-stretch'>
      <OdsAlert variant="info" open closable>
        <OdsIcon slot="icon" name="info-circle" />
        <div ods-layout="block gap:4">
          <p ods-text="semibold">This is super informative</p>
          <p ods-text="content size:md">You can tell by how pretty the alert is.</p>
        </div>
      </OdsAlert>

      <OdsAlert variant="success" open closable>
        <OdsIcon slot="icon" name="check-circle" />
        <div ods-layout="block gap:4">
          <p ods-text="semibold">Your changes have been saved</p>
          <p ods-text="content size:md">You can safely exit the app now.</p>
        </div>
      </OdsAlert>

      <OdsAlert variant="warning" open closable>
        <OdsIcon slot="icon" name="warning" />
        <div ods-layout="block gap:4">
          <p ods-text="semibold">Your session has ended</p>
          <p ods-text="content size:md">Please login again to continue.</p>
        </div>
      </OdsAlert>

      <OdsAlert variant="error" open closable>
        <OdsIcon slot="icon" name="exclamation-circle"></OdsIcon>
        <div ods-layout="block gap:4">
          <p ods-text="semibold">An error occured while updating</p>
          <p ods-text="content size:md">Update your details and try again!.</p>
        </div>
      </OdsAlert>
    </div>
  )
}

export default Example;

Add the closable attribute to show a close button that will hide the alert.

You can close this alert any time!

<ods-alert variant="info" open closable class="alert-closable">
  <ods-icon slot="icon" name="info-circle"></ods-icon>
  You can close this alert any time!
</ods-alert>

<script>
  const alert = document.querySelector('.alert-closable');

  alert.addEventListener('ods-after-hide', () => {
    setTimeout(() => (alert.open = true), 2000);
  });
</script>

import { useState } from 'react';
import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  const [open, setOpen] = useState(true);

  function handleHide() {
    setOpen(false);
    setTimeout(() => setOpen(true), 2000);
  }

  return (
    <OdsAlert open={open} closable onOdsAfterHide={handleHide}>
      <OdsIcon slot="icon" name="info-circle" />
      You can close this alert any time!
    </OdsAlert>
  )
}

export default Example;

Icons are optional. Simply omit the icon slot if you don’t want them.

Nothing fancy here, just a simple alert.

<ods-alert variant="info" open> Nothing fancy here, just a simple alert. </ods-alert>

import { OdsAlert } from '@ods/components/react.alert';

const Example = () => {
  return (
    <OdsAlert variant="info" open> Nothing fancy here, just a simple alert. </OdsAlert>
  )
}

export default Example;

This is super informative 4 min ago

You can tell by how pretty the alert is.

<ods-alert variant="info" open closable>
  <ods-icon slot="icon" name="info-circle"></ods-icon>

  <div ods-layout="block gap:4">
    <div>
      <span ods-text="semibold" ods-layout="mr:8">This is super informative</span>
      <span ods-text="content size:sm" class="meta-data">4 min ago</span>
    </div>

    <p ods-text="content size:md">You can tell by how pretty the alert is.</p>
  </div>
</ods-alert>

<style>
  .meta-data {
    color: var(--ods-sys-color-on-surface-softer);
  }
</style>

import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .meta-data {
    color: var(--ods-sys-color-on-surface-softer);
  }
`;

const Example = () => {
  return (
    <>
      <OdsAlert variant="info" open>
        <OdsIcon slot="icon" name="info-circle" />

        <div ods-layout="block gap:4">
          <div>
            <span ods-text="semibold" ods-layout="mr:8">This is super informative</span>
            <span ods-text="content size:sm" className="meta-data">4 min ago</span>
          </div>

          <p ods-text="content size:md">You can tell by how pretty the alert is.</p>
        </div>
      </OdsAlert>

      <style>{css}</style>
    </>
  )
}

export default Example;

Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.

Show Alert

This alert will automatically hide itself after three seconds, unless you interact with it.

<div class="alert-duration">
  <ods-button variant="primary">Show Alert</ods-button>

  <ods-alert variant="info" duration="3000" closable>
    <ods-icon slot="icon" name="info-circle"></ods-icon>
    This alert will automatically hide itself after three seconds, unless you interact with it.
  </ods-alert>
</div>

<style>
  .alert-duration ods-alert {
    margin-top: var(--ods-sys-space-16);
  }
</style>

<script>
  const containerDuration = document.querySelector('.alert-duration');
  const buttonDuration = containerDuration.querySelector('ods-button');
  const alertDuration = containerDuration.querySelector('ods-alert');

  buttonDuration.addEventListener('click', () => alertDuration.show());
</script>

import { useState } from 'react';
import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';
import { OdsButton } from '@ods/components/react.button';

const css = `
  .alert-duration ods-alert {
    margin-top: var(--ods-sys-space-16);
  }
`;

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className="alert-duration">
        <OdsButton variant="primary" onClick={() => setOpen(true)}>
          Show Alert
        </OdsButton>

        <OdsAlert variant="info" duration={3000} open={open} closable onOdsAfterHide={() => setOpen(false)}>
          <OdsIcon slot="icon" name="info-circle" />
          This alert will automatically hide itself after three seconds, unless you interact with it.
        </OdsAlert>
      </div>

      <style>{css}</style>
    </>
  )
}

export default Example;

To display an alert as a toast notification, or “toast”, create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call toast() again later on.

You should always use the closable attribute so users can dismiss the notification. It’s also common to set a reasonable duration when the notification doesn’t require acknowledgement.

Info

Success

Warning

Error

This is super informative
You can tell by how pretty the alert is.

Your changes have been saved
You can safely exit the app now.

Your session has ended
Please login again to continue.

An error occured while updating
Update your details and try again!

<div class="alert-toast">
  <ods-button id='info' variant="default">Info</ods-button>
  <ods-button id='success' variant="default">Success</ods-button>
  <ods-button id='warning' variant="default">Warning</ods-button>
  <ods-button id='error' variant="default">Error</ods-button>

  <ods-alert variant="info" duration="3000" closable>
    <ods-icon slot="icon" name="info-circle"></ods-icon>
    <strong>This is super informative</strong><br />
    You can tell by how pretty the alert is.
  </ods-alert>

  <ods-alert variant="success" duration="3000" closable>
    <ods-icon slot="icon" name="check-circle"></ods-icon>
    <strong>Your changes have been saved</strong><br />
    You can safely exit the app now.
  </ods-alert>

  <ods-alert variant="warning" duration="3000" closable>
    <ods-icon slot="icon" name="warning"></ods-icon>
    <strong>Your session has ended</strong><br />
    Please login again to continue.
  </ods-alert>

  <ods-alert variant="error" duration="3000" closable>
    <ods-icon slot="icon" name="exclamation-circle"></ods-icon>
    <strong>An error occured while updating</strong><br />
    Update your details and try again!
  </ods-alert>
</div>

<style>
  .alert-toast {
    display: flex;
    gap: 0.5rem;
  }

  #info::part(base) {
    background-color: var(--ods-sys-color-status-info-muted);
    border: 1px solid var(--ods-sys-color-status-info);
  }

  #success::part(base) {
    background-color: var(--ods-sys-color-status-success-muted);
    border: 1px solid var(--ods-sys-color-status-success);
  }

  #warning::part(base) {
    background-color: var(--ods-sys-color-status-warning-muted);
    border: 1px solid var(--ods-sys-color-status-warning);
  }

  #error::part(base) {
    background-color: var(--ods-sys-color-status-danger-muted);
    border: 1px solid var(--ods-sys-color-status-danger);
  }
</style>

<script>
  const container = document.querySelector('.alert-toast');

  ['info', 'success', 'warning', 'error'].map(id => {
    const button = container.querySelector(`ods-button[id="${id}"]`);
    const alert = container.querySelector(`ods-alert[variant="${id}"]`);

    button.addEventListener('click', () => alert.toast());
  });
</script>

import { useRef } from 'react';
import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const info:any = useRef(null);
  const success:any = useRef(null);
  const warning:any = useRef(null);
  const error:any = useRef(null);

  return (
    <div ods-layout='inline gap:xs'>
      <OdsButton id='info' variant="default" onClick={() => info.current.toast()}>
        Info
      </OdsButton>

      <OdsButton id='success' variant="default" onClick={() => success.current.toast()}>
        Success
      </OdsButton>

      <OdsButton id='warning' variant="default" onClick={() => warning.current.toast()}>
        Warning
      </OdsButton>

      <OdsButton id='error' variant="default" onClick={() => error.current.toast()}>
        Error
      </OdsButton>

      <OdsAlert ref={info} variant="info" duration={3000} closable>
        <OdsIcon slot="icon" name="info-circle" />
        <strong>This is super informative</strong>
        <br />
        You can tell by how pretty the alert is.
      </OdsAlert>

      <OdsAlert ref={success} variant="success" duration={3000} closable>
        <OdsIcon slot="icon" name="check-circle" />
        <strong>Your changes have been saved</strong>
        <br />
        You can safely exit the app now.
      </OdsAlert>

      <OdsAlert ref={warning} variant="warning" duration={3000} closable>
        <OdsIcon slot="icon" name="warning" />
        <strong>Your session has ended</strong>
        <br />
        Please login again to continue.
      </OdsAlert>

      <OdsAlert ref={error} variant="error" duration={3000} closable>
        <OdsIcon slot="icon" name="exclamation-circle"></OdsIcon>
        <strong>An error occured while updating</strong>
        <br />
        Update your details and try again!
      </OdsAlert>
    </div>
  );
}

export default Example;

For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the toast() method as shown in the example below.

Create Toast

<div class="alert-toast-wrapper">
  <ods-button variant="primary">Create Toast</ods-button>
</div>

<script>
  const containerExample = document.querySelector('.alert-toast-wrapper');
  const buttonExample = containerExample.querySelector('ods-button');
  let count = 0;

  // Always escape HTML for text arguments!
  function escapeHtml(html) {
    const div = document.createElement('div');
    div.textContent = html;
    return div.innerHTML;
  }

  // Custom function to emit toast notifications
  function notify(message, variant = 'info', icon = 'info-circle', duration = 3000) {
    const alertExample = Object.assign(document.createElement('ods-alert'), {
      variant,
      closable: true,
      duration: duration,
      innerHTML: `
        <ods-icon name="${icon}" slot="icon"></ods-icon>
        ${escapeHtml(message)}
      `
    });

    document.body.append(alert);
    return alertExample.toast();
  }

  buttonExample.addEventListener('click', () => {
    notify(`This is custom toast #${++count}`);
  });
</script>

The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.

By default, the toast stack is positioned at the bottom-right of the viewport. You can change its position by targeting .ods-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.

.ods-toast-stack {
  left: 0;
  right: auto;
}

Importing

import '@ods/components/web.alert';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The alert's main content.
icon	An icon to show in the alert. Works best with `<ods-icon>`.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
open	boolean	false
closable	boolean	false
variant	'info' \| 'success' \| 'neutral' \| 'warning' \| 'error'	'info'
duration		Infinity

Events

React Event	Description	Event Detail
ods-show	Emitted when the alert opens.	--
ods-after-show	Emitted after the alert opens and all animations are complete.	--
ods-hide	Emitted when the alert closes.	--
ods-after-hide	Emitted after the alert closes and all animations are complete.	--

Methods

Name	Description	Arguments
show()	Shows the alert.	--
hide()	Hides the alert	--
toast()	Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.	--

Parts

Name	Description
base	The component's base wrapper.
icon	The container that wraps the optional icon.
message	The container that wraps the alert's main content.
close-button	The close button, an `<ods-icon-button>`.
close-button__base	The close button's exported `base` part.

Dependencies

This component automatically imports the following dependencies.

ods-icon
ods-icon-button

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Trigger an alert when a user takes an action and needs a confirmation that the action succeeded or didn’t, and why.
Consider placement of the Alert - the default stack position is bottom right, but they can also be placed within the interface, like above a form or within a card.
Add an Alert Title if needed but it is not necessary to add one if the message itself is easily understood and scannable

Use Alerts to notify user of a new message or other low-priority background information, unless customization options allow for this.
Place an alert within the interface in a position that causes baseline shifts to other elements - i.e., place the alert at the top or bottom of a form, not in between inputs.
Add actions into the Alert other than the close action. If the alert requires an action from the user, consider a dialog instead.
Replace the standard status-based icons with custom alternatives
Use an alert as an alternative to inline error messaging on inputs

Content Guidelines

Alerts communicate important information to the user and should be as clear and concise as possible to convey the information with little ambiguity or confusion.

Get to the point, don’t pad the message with too much fluff

Changes saved successfully!

Hey there Doctor Smith, just wanted to let you know that the changes you made were successful. Have a nice day!

Include helpful direction if needed

Network error - Check your internet connection.

Network error.

Alert

Examples

Basic

Variants

Closable

Without Icons

With Meta Data

Duration

Toast Notifications

Creating Toasts Imperatively

The Toast Stack

Importing

Slots

Properties

Events

Methods

Parts

Dependencies

Usage

Do

Dont

Content Guidelines

Do

Dont

Do

Dont