Flash messages

Standard

1<div className="v-stack spaced">
2  <Flash style="success">This is a success!</Flash>
3  <Flash style="info">This is some info!</Flash>
4  <Flash style="warning">This is a warning!</Flash>
5  <Flash style="error">This is an error!</Flash>
6</div>

Link variation

1<div className="v-stack spaced">
2  <Flash style="success" href="#">
3    This is a success!
4  </Flash>
5  <Flash style="info" href="#">
6    This is some info!
7  </Flash>
8  <Flash style="warning" href="#">
9    This is a warning!
10  </Flash>
11  <Flash style="error" href="#">
12    This is an error!
13  </Flash>
14</div>

Icon variation

1<Flash style="success" IconComponent={FireIcon}>
2  This is a success!
3</Flash>
4<Flash style="info" IconComponent={InformationCircleIcon}>
5  This is some info!
6</Flash>
7<Flash style="warning" IconComponent={ExclamationCircleIcon}>
8  This is a warning!
9</Flash>
10<Flash style="error" IconComponent={ExclamationTriangleIcon}>
11  This is an error!
12</Flash>
13</div>