Alerts & Feedback - Pico-Daisy Components

Role-based Alerts

Use role="alert" with data-type for semantic alerts. No classes needed!

Info: This is a default alert using just role="alert".

Success: Your changes have been saved successfully.

Warning: Please review your settings before continuing.

Error: Something went wrong. Please try again.

<div role="alert">Default info alert</div>

                <div role="alert"
                data-type="success">Success!</div>

                <div role="alert"
                data-type="warning">Warning...</div>

                <div role="alert"
                data-type="error">Error!</div>
            

Badges

Simple badge classes with color modifiers.

Default Primary Secondary Accent Success Warning Error

<span class="badge">Default</span>
                <span class="badge
                    bg-primary">Primary</span>
                <span class="badge
                    bg-success">Success</span>
            

Outline Badges

Add .outline for bordered badges.

Primary Secondary Accent

<span class="badge outline primary">Primary</span>

Blockquotes (Classless)

Just use <blockquote> for beautiful quotes.

"The best interface is no interface at all. Semantic HTML styled beautifully."
— Pico-Daisy Philosophy

<blockquote>
                "Your quote here..."
                <footer>— Author</footer>
                </blockquote>
            

Keyboard Shortcuts (Classless)

The <kbd> element is styled automatically.

Press Ctrl + S to save, or Ctrl + Shift + P for command palette.

Press <kbd>Ctrl</kbd>
                + <kbd>S</kbd> to save.

Text Highlighting (Classless)

The <mark> element gets a gradient highlight.

This is regular text with highlighted content that stands out beautifully.

Text with <mark>highlighted content</mark> here.

Loading State

Add .loading to any button to show a spinner.

<button class="loading">Saving...</button>