#Alert

#Related

• Interaction design guidelines ↗
• Alert design specifications ↗

#Usage

Import the Alert component into a React component in your project:

import {Alert} from 'hello-next-js'

Use Alert by passing children:

import React from 'react'
import {Alert} from 'hello-next-js'
export const MyComponent: React.FC<any> = () => {
  return (
    <div>
      <p>Uh-oh<p>
      <Alert>
        <strong>Warning:</strong>
        This is a cautionary alert.
      </Alert>
    </div>
  )
}

#Variants

Alert comes with three variations, which are set via the variant property.

#Success

Use to signify a positive or successful interaction.

<Alert variant="success">
  <strong>Success!</strong> This is a positive alert.
</Alert>

#Warning

Use to indicate bring awareness of a non-critical, potentially negative information. This is the default Alert.

<Alert variant="warning">
  <strong>Warning:</strong> This is a cautionary alert.
</Alert>

#Error

Use to convey a negative or errorful interaction or state.

<Alert variant="error">
  <strong>Error!</strong> This is a negative alert.
</Alert>

#Closeable

Pass an onClose property to the Alert to display a close button:

<Alert onClose={console.log} variant="success">
  This alert is closeable.
</Alert>

The Alert component has a focusButton method that will call HTMLElement.focus() on the button.

#Accessibility

The Alert component has a role="alert" property, which covers the WCAG requirement.

#Related

• "Using the alert role" on MDN ↗

#Component API

#Props

#Methods