Alerts

Provide contextual feedback messages for typical user actions.

React Bootstrap docs

Basic example

import Link from 'next/link'
import Alert from 'react-bootstrap/Alert'

{/* Primary alert */}
<Alert variant='primary'>
  A simple primary alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Accent alert */}
<Alert variant='accent'>
  A simple accent alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Secondary alert */}
<Alert variant='secondary'>
  A simple secondary alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Success alert */}
<Alert variant='success'>
  A simple success alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Danger alert */}
<Alert variant='danger'>
  A simple danger alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Warning alert */}
<Alert variant='warning'>
  A simple warning alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Info alert */}
<Alert variant='info'>
  A simple info alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Light alert */}
<Alert variant='light'>
  A simple light alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

{/* Dark alert */}
<Alert variant='dark'>
  A simple dark alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.
</Alert>

Alert with icon

import Link from 'next/link'
import Alert from 'react-bootstrap/Alert'

{/* Primary alert */}
<Alert variant='primary' className='d-flex'>
  <i className='fi-bell me-2 me-sm-3 lead'></i>
  <div>A simple primary alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Accent alert */}
<Alert variant='accent' className='d-flex'>
  <i className='fi-star me-2 me-sm-3 lead'></i>
  <div>A simple accent alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Secondary alert */}
<Alert variant='secondary' className='d-flex'>
  <i className='fi-clock me-2 me-sm-3 lead'></i>
  <div>A simple secondary alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Success alert */}
<Alert variant='success' className='d-flex'>
  <i className='fi-check-circle me-2 me-sm-3 lead'></i>
  <div>A simple success alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Danger alert */}
<Alert variant='danger' className='d-flex'>
  <i className='fi-x-circle me-2 me-sm-3 lead'></i>
  <div>A simple danger alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Warning alert */}
<Alert variant='warning' className='d-flex'>
  <i className='fi-alert-triange me-2 me-sm-3 lead'></i>
  <div>A simple warning alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Info alert */}
<Alert variant='info' className='d-flex'>
  <i className='fi-alert-circle me-2 me-sm-3 lead'></i>
  <div>A simple info alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Light alert */}
<Alert variant='light' className='d-flex'>
  <i className='fi-unlock me-2 me-sm-3 lead'></i>
  <div>A simple light alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

{/* Dark alert */}
<Alert variant='dark' className='d-flex'>
  <i className='fi-map-pin me-2 me-sm-3 lead'></i>
  <div>A simple dark alert with <Alert.Link as={Link} href='#'>an example link</Alert.Link>. Give it a click if you like.</div>
</Alert>

Dismissible alert

import { useState } from 'react'
import Alert from 'react-bootstrap/Alert'

const AlertDismissibleExample = () => {
  const [show, setShow] = useState(true)

  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>
          Change this and that and try again. Duis mollis, est non commodo
          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
          Cras mattis consectetur purus sit amet fermentum.
        </p>
      </Alert>
    )
  }
}

render(<AlertDismissibleExample />)