# Alert messages Alert

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


            const alertInstance = (
              <div>
                <Alert success>
                  <strong>Well done! </strong><span>You successfully read this important alert message.</span>
                </Alert>
                <Alert info>
                  <strong>Heads up! </strong><span>This alert needs your attention, but it's not super important.</span>
                </Alert>
                <Alert bsStyle="warning">
                  <strong>Warning! </strong><span>Better check yourself, you're not looking too good.</span>
                </Alert>
                <Alert danger>
                  <strong>Oh snap! </strong><span>Change a few things up and try submitting again.</span>
                </Alert>
              </div>
            );

            
          

# Closeable alerts (controlled)

just pass in a onDismiss function.


            class AlertDismissable extends React.Component {
              constructor(...args) {
                super(...args);

                this.state = { alertVisible: true };
              }

              handleAlertDismiss() {
                this.setState({alertVisible: false});
              }

              handleAlertShow() {
                this.setState({alertVisible: true});
              }

              render() {
                if (this.state.alertVisible) {
                  return (
                    <Alert bsStyle="danger" onDismiss={::this.handleAlertDismiss}>
                      <h4>Oh snap! You got an error!</h4>
                      <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>
                      <p>
                        <Button bsStyle="danger">Take this action</Button>
                        <span> or </span>
                        <Button onClick={::this.handleAlertDismiss}>Hide Alert</Button>
                      </p>
                    </Alert>
                  );
                }

                return (
                  <Button onClick={::this.handleAlertShow}>Show Alert</Button>
                );
              }
            }

            
          

# Dismissible alerts (uncontrolled)

Build on any alert by adding an optional dismissible property.


            const alertInstance = (
              <Alert warning dismissible>
                <strong>Warning! </strong><span>Better check yourself, you're not looking too good.</span>
              </Alert>
            );

            
          

# Links in Alerts

Use the AlertLink component to quickly provide matching colored links within any alert.


            const alertInstance = (
              <div>
                <Alert success>
                  <strong>Well done! </strong><span>You successfully read <AlertLink href='#'>this important alert message</AlertLink>.</span>
                </Alert>
                <Alert info>
                  <strong>Heads up! </strong><span>This <AlertLink href='#'>alert needs your attention</AlertLink>, but it's not super important.</span>
                </Alert>
                <Alert bsStyle="warning">
                  <strong>Warning! </strong><span>Better check yourself, <AlertLink href='#'>not looking too good.</AlertLink></span>
                </Alert>
                <Alert danger>
                  <strong>Oh snap! </strong><span><AlertLink href='#'>Change a few things up</AlertLink> and try submitting again.</span>
                </Alert>
              </div>
            );

            
          

# Props

NameTypeDefaultDescription
bsClassstring'alert'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsStyleone of: "success", "warning", "danger", "info"'info'Component visual or contextual style variants.
successbooleanfalseSuccess contextual style.
infobooleanfalseInfo contextual style.
warningbooleanfalseWarning contextual style.
dangerbooleanfalseDanger contextual style.
closeLabelstring'Close Alert'
dismissiblebooleanfalseAlert can be dismissed by clicking on the close symbol.
onDismissfunction