Alerts

Alerts are used to communicate important messages to users, providing context through different styles and interactive elements.

Basic Alert

The most simple version of an alert displays a message with default styling. Use this when you need to show general information without emphasizing its nature.

<byte-alert>
      This is a basic info alert
    </byte-alert>

Alert Types

Alerts come in different types to convey different meanings: info, success, warning, and error. Add icons to make them more visually distinctive.

<byte-alert type="success" icon="check-badge">
      Your changes have been saved successfully
    </byte-alert>

Interactive Alerts

Add action buttons to your alerts when users need to take specific actions. Actions appear as buttons or links and can trigger different behaviors.

<byte-alert type="warning">
      Your trial period is ending soon
      <byte-alert-action href="/billing">Upgrade Now</byte-alert-action>
      <byte-alert-action href="/billing">Learn More</byte-alert-action>
    </byte-alert>

Rich Content

Alerts can contain rich HTML content including headings, paragraphs, and other elements. This is useful for more complex messages that need better structure.

<byte-alert type="info">
      <h4 class="font-medium mb-1">Important Notice</h4>
      <p class="mb-2">Your account will be suspended in 3 days if you don't update your payment information.</p>
      <byte-alert-action href="/billing">Update Payment</byte-alert-action>
    </byte-alert>

Dismissible Alerts

Add the dismissible attribute to allow users to dismiss alerts. This is useful for temporary messages or notifications that don't need to persist.

<byte-alert type="error" dismissible>
      There was an error processing your request
      <byte-alert-action href="/support">Contact Support</byte-alert-action>
    </byte-alert>

API Reference

Properties

Events

Best Practices

• Use appropriate alert types to match the message's importance
• Keep alert messages clear and concise
• Include actions only when users need to take specific steps
• Use dismissible alerts for temporary messages that don't need to persist
• Consider using icons to enhance visual recognition