Alert

Colors

Primary

<Alert theme="primary"> <Alert.CloseButton /> This is a <strong>primary</strong> alert. You should probably pay attention to it. </Alert>

<Alert theme="primary">
  <Alert.CloseButton />
  
  This is a <strong>primary</strong> alert. You should probably pay attention to  it.
</Alert>

Secondary

<Alert theme="secondary"> <Alert.CloseButton /> This is a <strong>secondary</strong> alert. It's not too important, you may ignore it. </Alert>

<Alert theme="secondary">
  <Alert.CloseButton />
  
  This is a <strong>secondary</strong> alert. It's not too important, you may ignore it.
</Alert>

Success

<Alert theme="success"> <Alert.CloseButton /> This is a <strong>success</strong> alert. Something good must have happened! </Alert>

<Alert theme="success">
  <Alert.CloseButton />
  
  This is a <strong>success</strong> alert. Something good must have happened!
</Alert>

Info

<Alert theme="info"> <Alert.CloseButton /> This is an <strong>info</strong> alert. For your information only. </Alert>

<Alert theme="info">
  <Alert.CloseButton />
  
  This is an <strong>info</strong> alert. For your information only.
</Alert>

Warning

<Alert theme="warning"> <Alert.CloseButton /> This is a <strong>warning</strong> alert. Be warned, you should pay attention! </Alert>

<Alert theme="warning">
  <Alert.CloseButton />
  
  This is a <strong>warning</strong> alert. Be warned, you should pay attention!
</Alert>

Danger

<Alert theme="danger"> <Alert.CloseButton /> This is a <strong>danger</strong> alert. Something has gone wrong, please investigate! </Alert>

<Alert theme="danger">
  <Alert.CloseButton />
  
  This is a <strong>danger</strong> alert. Something has gone wrong, please investigate!
</Alert>