## Toasts

Toast notifications for displaying brief, auto-dismissing messages to users.

### Basic Toasts

This is a basic toast notification.
Success! Your changes have been saved.
Warning: Please review your input.
Error: Something went wrong.
HTML

    <div
                class="toast-container"
                style="
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                "
            >
                <div
                    class="toast show"
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 12px 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    "
                >
                    <div class="toast-body">
                        This is a basic toast notification.
                    </div>
                    <button
                        class="toast-close"
                        style="
                            background: none;
                            border: none;
                            font-size: 18px;
                            cursor: pointer;
                        "
                    >
                        &times;
                    </button>
                </div>

                <div
                    class="toast toast--success show"
                    style="
                        display: flex;
                        align-items: center;
                        padding: 12px 16px;
                        background: var(--color_state_success);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    <div class="toast-body">
                        <strong>Success!</strong>
                        Your changes have been saved.
                    </div>
                    <button
                        class="toast-close"
                        style="
                            background: none;
                            border: none;
                            color: white;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: auto;
                        "
                    >
                        &times;
                    </button>
                </div>

                <div
                    class="toast toast--warning show"
                    style="
                        display: flex;
                        align-items: center;
                        padding: 12px 16px;
                        background: var(--color_state_warning);
                        border-radius: 8px;
                    "
                >
                    <div class="toast-body">
                        <strong>Warning:</strong>
                        Please review your input.
                    </div>
                    <button
                        class="toast-close"
                        style="
                            background: none;
                            border: none;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: auto;
                        "
                    >
                        &times;
                    </button>
                </div>

                <div
                    class="toast toast--error show"
                    style="
                        display: flex;
                        align-items: center;
                        padding: 12px 16px;
                        background: var(--color_state_error);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    <div class="toast-body">
                        <strong>Error:</strong>
                        Something went wrong.
                    </div>
                    <button
                        class="toast-close"
                        style="
                            background: none;
                            border: none;
                            color: white;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: auto;
                        "
                    >
                        &times;
                    </button>
                </div>
            </div>

### Toast with Header

Notification Just now
You have a new message from the team.
HTML

    <div
                class="toast-container"
                style="
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                "
            >
                <div
                    class="toast show"
                    style="
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    "
                >
                    <div
                        class="toast-header"
                        style="
                            display: flex;
                            align-items: center;
                            padding: 8px 12px;
                            border-bottom: 1px solid var(--color_line_secondary);
                        "
                    >
                        <strong style="flex: 1">Notification</strong>
                        <small style="opacity: 0.7">Just now</small>
                        <button
                            class="toast-close"
                            style="
                                background: none;
                                border: none;
                                font-size: 16px;
                                cursor: pointer;
                                margin-left: 8px;
                            "
                        >
                            &times;
                        </button>
                    </div>
                    <div class="toast-body" style="padding: 12px">
                        You have a new message from the team.
                    </div>
                </div>
            </div>

### Toast with Actions

Item deleted.
New update available.
HTML

    <div
                class="toast-container"
                style="
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                "
            >
                <div
                    class="toast show"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                    "
                >
                    <span>Item deleted.</span>
                    <button
                        class="button button--small button--primary"
                        style="margin-left: auto"
                    >
                        Undo
                    </button>
                </div>

                <div
                    class="toast show"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                    "
                >
                    <span>New update available.</span>
                    <div style="display: flex; gap: 8px; margin-left: auto">
                        <button class="button button--small button--primary">
                            Update
                        </button>
                        <button class="button button--small button--secondary">
                            Later
                        </button>
                    </div>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!