Cirrus

#Toast

Use toasts to notify users of any changes.

#Basics

A toast is the only class we need to worry about for this component. Anything can be added within a toast.

To add a title for the toast, use the toast__title class on a text element.

Danger!

Run.

<div class="toast toast--primary">
    <button class="btn-close"></button>
    <h4 class="toast__title">Danger!</h4>
    <p>Run.</p>
</div>

A close button can be added with a btn-close div.

Just kidding. False alarm.

<div class="toast">
    <button class="btn-close"></button>
    <p>Just kidding. False alarm.</p>
</div>

The toast--translucent class adds a bit of translucency to the toast.

#Styles

Toasts can be customized using the v1 pre-built color classes.

Success

Warning

Error

Info

Link

Primary

Gray

Dark

<div class="col-lg-6">
    <div class="toast toast--success">
        <button class="btn-close"></button>
        <p>Success</p>
    </div>
    <div class="toast toast--warning">
        <button class="btn-close"></button>
        <p>Warning</p>
    </div>
    <div class="toast toast--danger">
        <button class="btn-close"></button>
        <p>Error</p>
    </div>
    <div class="toast toast--info">
        <button class="btn-close"></button>
        <p>Info</p>
    </div>
    <div class="toast toast--link">
        <button class="btn-close"></button>
        <p>Link</p>
    </div>
    <div class="toast toast--primary">
        <button class="btn-close"></button>
        <p>Primary</p>
    </div>
    <div class="toast toast--gray">
        <button class="btn-close"></button>
        <p>Gray</p>
    </div>
    <div class="toast toast--dark">
        <button class="btn-close"></button>
        <p>Dark</p>
    </div>
</div>