React-Bootstrap · React-Bootstrap DocumentationSkip to contentHomeGetting StartedComponentsv2.7.0 (Bootstrap 5.2)GithubDiscordSearchMenuGetting startedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButton GroupCardsCarouselClose ButtonDropdownsFiguresImagesList GroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutAlertsProvide 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.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;CopyConveying meaning to assistive technologiesUsing 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.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;CopyAdditional content#Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy.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;CopyDismissing#Add the dismissible prop to add a functioning dismiss
button to the Alert.import React, { 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>;
render(<AlertDismissibleExample />);import React, { 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>;}
render(<AlertDismissibleExample />);CopyYou can also control the visual state directly which is great if you
want to build more complicated alerts.import React, { 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>How's it going?!</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 y'all!
</Button>
</div>
</Alert>
{!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
</>
);
render(<AlertDismissible />);import React, { 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>How's it going?!</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 y'all! </Button> </div> </Alert>
{!show && <Button onClick={() => setShow(true)}>Show Alert</Button>} </> );}
render(<AlertDismissible />);CopyAPI#Alert#view source fileimport Alert from 'react-bootstrap/Alert'Copy import code for the Alert componentNameTypeDefaultDescriptioncloseLabel string'Close alert'Sets the text for alert close button.closeVariant 'white'Sets the variant for close button.dismissible booleanRenders a properly aligned dismiss button, as well as
adding extra horizontal padding to the Alert.onClose functioncontrols showCallback fired when alert is closed.show booleantruecontrolled by: onClose, initial prop: defaultShowControls the visual state of the Alert.transition boolean | elementTypeFadeAnimate the alert dismissal. Defaults to using <Fade> animation or use
false to disable. A custom react-transition-group Transition can also
be provided.variant 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light''primary'The Alert visual variantbsPrefix string'alert'Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.Alert.Heading#view source fileimport Alert from 'react-bootstrap/Alert'Copy import code for the Alert componentNameTypeDefaultDescriptionas elementType<DivStyledAsH4>You can use a custom element type for this component.bsPrefix requiredstring'alert-heading'Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.Alert.Link#view source fileimport Alert from 'react-bootstrap/Alert'Copy import code for the Alert componentNameTypeDefaultDescriptionas elementType<Anchor>You can use a custom element type for this component.bsPrefix requiredstring'alert-link'Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.