Alert

The Alert component is used to display a brief, important messages to users in a way that attracts the user’s attention without interrupting the user’s task. It supports different variants for different types of messages, can include icons, and can be made dismissible.

Import

<script>
  import Alert from 'rebel-ui';
</script>

Usage

Basic Alert

Alert with Title

<Alert 
  title="Success!" 
  message="Your changes have been saved successfully." 
  variant="success" 
/>

Alert Variants

The Alert component comes with four variants to convey different types of messages:

<Alert variant="info" message="This is an informational message" />
<Alert variant="success" message="Operation completed successfully" />
<Alert variant="warning" message="Please review your input" />
<Alert variant="error" message="An error occurred" />

Dismissible Alert

<Alert 
  title="Notification" 
  message="This alert can be dismissed" 
  dismissible 
/>

Different Sizes

<Alert size="sm" message="Small alert" />
<Alert size="md" message="Medium alert" />
<Alert size="lg" message="Large alert" />

Custom Icon

You need to import your icon library or use svg

<Alert 
  icon=""
  message="Alert with custom icon"
/>

API Reference

Props

Prop	Type	Default	Description
variant	'success' \| 'warning' \| 'error' \| 'info'	'info'	The variant of the alert
title	string	''	The title of the alert
message	string	''	The main message of the alert
dismissible	boolean	false	Whether the alert can be dismissed
size	'sm' \| 'md' \| 'lg'	'md'	The size of the alert
icon	() => string	undefined	A function that returns an SVG string for a custom icon

Styling

The Alert component uses CSS variables for theming:

.alert {
  --rebel-surface: /* background color */
  --rebel-border-light: /* border color */
  --rebel-success: /* success variant color */
  --rebel-warning: /* warning variant color */
  --rebel-error: /* error variant color */
  --rebel-surface-elevated: /* elevated surface color */
}

Accessibility

• Uses role="alert" for screen readers
• Includes proper ARIA attributes for live regions
• Dismissible alerts have accessible button labels
• Icons are properly labeled and hidden from screen readers when decorative

Examples

Info Alert with Title and Icon

Warning Alert with Custom Icon

Large Dismissible Success Alert