Alerts

HTML Layout

<p class="alert success"><strong>Woah!</strong> You did something not good, but great!</p>
<p class="alert warning"><strong>Careful, buster.</strong> No misbheaving!</p>
<p class="alert error"><strong>Uh oh!</strong> George has broken something again.</p>
<p class="alert info">I just wanted to say you look really cool.</p>

Supported statuses: Success, warning, error, info.

React Layout

import { Alert } from '@cupid-ui/react';

// [...]

<Alert
  title="Woah!"
  text="You did something not good, but great!"
  type="success"
/>

Parameters

Preview

Woah! You did something not good, but great!

Careful, buster. No misbheaving!

Uh oh! George has broken something again.

I just wanted to say you look really cool.

More info