Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants.

Result

Loading...

Live Editor

import Alert from 'react-bootstrap/Alert'; function BasicExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert—check it out! </Alert> ))} </> ); } export default BasicExample;

import Alert from 'react-bootstrap/Alert';

function BasicExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert—check it out!
        </Alert>
      ))}
    </>
  );
}

export default BasicExample;

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Links

For links, use the <Alert.Link> component to provide matching colored links within any alert.

Result

Loading...

Live Editor

import Alert from 'react-bootstrap/Alert'; function LinksExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert with{' '} <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like. </Alert> ))} </> ); } export default LinksExample;

import Alert from 'react-bootstrap/Alert';

function LinksExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert with{' '}
          <Alert.Link href="#">an example link</Alert.Link>. Give it a click if
          you like.
        </Alert>
      ))}
    </>
  );
}

export default LinksExample;

Additional content

Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy.

Result

Loading...

Live Editor

import Alert from 'react-bootstrap/Alert'; function AdditionalContentExample() { return ( <Alert variant="success"> <Alert.Heading>Hey, nice to see you</Alert.Heading> <p> Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <hr /> <p className="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </Alert> ); } export default AdditionalContentExample;

import Alert from 'react-bootstrap/Alert';

function AdditionalContentExample() {
  return (
    <Alert variant="success">
      <Alert.Heading>Hey, nice to see you</Alert.Heading>
      <p>
        Aww yeah, you successfully read this important alert message. This
        example text is going to run a bit longer so that you can see how
        spacing within an alert works with this kind of content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things
        nice and tidy.
      </p>
    </Alert>
  );
}

export default AdditionalContentExample;

Dismissing

Add the dismissible prop to add a functioning dismiss button to the Alert.

Result

Loading...

Live Editor

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function 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> ); } return <Button onClick={() => setShow(true)}>Show Alert</Button>; } export default AlertDismissibleExample;

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

function 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>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

export default AlertDismissibleExample;

You can also control the visual state directly which is great if you want to build more complicated alerts.

Result

Loading...

Live Editor

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function AlertDismissible() { const [show, setShow] = useState(true); return ( <> <Alert show={show} variant="success"> <Alert.Heading>My Alert</Alert.Heading> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <hr /> <div className="d-flex justify-content-end"> <Button onClick={() => setShow(false)} variant="outline-success"> Close me </Button> </div> </Alert> {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>} </> ); } export default AlertDismissible;

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

function AlertDismissible() {
  const [show, setShow] = useState(true);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>My Alert</Alert.Heading>
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
          fermentum.
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}

export default AlertDismissible;

API

Alert

AlertHeading

AlertLink