Alert

Alert displays an inline, persistent, message to convey the status of an action or feature.

Headline

React

Alert composes Chakra's Alert component and is available in five statuses to indicate the type of event that triggered it.

live

<Stack direction="column" spacing="400">
  <Alert status="info">An informational alert</Alert>
  <Alert status="warning">An alert that serves as a warning</Alert>
  <Alert status="error">An alert indicating an error</Alert>
  <Alert status="success">A successful alert</Alert>
  <Alert status="loading">A pending alert</Alert>
</Stack>

Property	Type	Default	Description
`status`	`info`, `warning`, `error`, `success`, `loading`	`info`	Status type determining color scheme and icon
`title`	`ReactNode`	-	Title text displayed above the description
`onCloseClick`	`MouseEventHandler`	-	Handler for close button, displays button when set

Close

Pass onCloseClick to enable the close button. Actually hiding the Alert requires wiring up some state.

live

() => {
  const [isOpen, { off }] = useBoolean(true);
  return (
    <Stack direction="column" spacing="400">
      {isOpen ? (
        <Alert onCloseClick={off}>
          I have a close button <em>and</em> you can close me
        </Alert>
      ) : (
        <Panel bg="transparent" textAlign="center">
          Poof 💨
        </Panel>
      )}
    </Stack>
  );
};

Bootstrap

Add the .alert and .alert-[status] classes to a container to display an Alert. See Bootstrap's Alert documentation for more information.

live

<div class="vstack gap-400">
  <div class="alert alert-info mb-0" role="alert">An informational alert</div>
  <div class="alert alert-warning mb-0" role="alert">
    An alert that serves as a warning
  </div>
  <div class="alert alert-danger mb-0" role="alert">
    An alert indicating an error
  </div>
  <div class="alert alert-success mb-0" role="alert">A successful alert</div>
  <div class="alert alert-light mb-0" role="alert">A neutral alert</div>
</div>

Close

live

<div class="vstack gap-400">
  <div class="alert alert-info alert-dismissible with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-primary-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-alert-circle" />
    </svg>
    <span>I have a close button</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div
    class="alert alert-small alert-info alert-dismissible with-icon mb-0"
    role="alert"
  >
    <svg
      class="icon icon-small text-primary-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-alert-circle" />
    </svg>
    <span>I'm smaller and also have a close button</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

Icons

Icons must be added manually for Bootstrap, see the icons page for details.

live

<div class="vstack gap-400">
  <div class="alert alert-info with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-primary-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-info" />
    </svg>
    <span>An informational alert</span>
  </div>
  <div class="alert alert-warning with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-warning-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-alert-circle" />
    </svg>
    <span>An alert that serves as a warning</span>
  </div>
  <div class="alert alert-danger with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-danger-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-alert-circle" />
    </svg>
    <span>An alert indicating an error</span>
  </div>
  <div class="alert alert-success with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-success-base m-0"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#i-check-circle" />
    </svg>
    <span>A successful alert</span>
  </div>
  <div class="alert alert-light with-icon mb-0" role="alert">
    <svg
      class="icon icon-medium text-neutral-500 m-0 spin-500"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="/icons/all.svg#h-loader" />
    </svg>
    <span>A pending alert</span>
  </div>
</div>

Accordion

Aspect Ratio