Alert

Variants

Set variants using variant prop. All colors defined in your theme (or not) can be used.

This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!
Custom color
import React from 'react'
import { Alert, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Alert variant="primary">This is a primary alert—check it out!</Alert>
      <Alert variant="secondary">This is a secondary alert—check it out!</Alert>
      <Alert variant="success">This is a success alert—check it out!</Alert>
      <Alert variant="danger">This is a danger alert—check it out!</Alert>
      <Alert variant="warning">This is a warning alert—check it out!</Alert>
      <Alert variant="info">This is a info alert—check it out!</Alert>
      <Alert variant="light">This is a light alert—check it out!</Alert>
      <Alert variant="dark">This is a dark alert—check it out!</Alert>
      <Alert variant="#804FCE">Custom color</Alert>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Alert, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Alert variant="primary">This is a primary alert—check it out!</Alert>
      <Alert variant="secondary">This is a secondary alert—check it out!</Alert>
      <Alert variant="success">This is a success alert—check it out!</Alert>
      <Alert variant="danger">This is a danger alert—check it out!</Alert>
      <Alert variant="warning">This is a warning alert—check it out!</Alert>
      <Alert variant="info">This is a info alert—check it out!</Alert>
      <Alert variant="light">This is a light alert—check it out!</Alert>
      <Alert variant="dark">This is a dark alert—check it out!</Alert>
      <Alert variant="#804FCE">Custom color</Alert>
    </Boxer>
  )
}
render(<Example />)

Accessibility

Alert follows WAI-ARIA Alert Pattern.

• The role alert is automatically added

API

Alert