<a id="alert"></a>

## Alert  
**Category**: Feedback
Visual feedback for important messages
### Examples

#### Basic Alert  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Span('12 unread messages'),
    role='alert',
    cls='alert w-full'
)
```

#### Color Variants  
```python
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-info'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-success'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-warning'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-error'
)
```

#### Responsive Alert with buttons  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Span('we use cookies for no reason.'),
    Div(
        Button('Deny', cls='btn btn-sm'),
        Button('Accept', cls='btn btn-sm btn-primary')
    ),
    role='alert',
    cls='alert alert-vertical sm:alert-horizontal w-full'
)
```

#### Soft Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-soft"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-soft"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-soft"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-soft"
)
```

#### Outline Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-outline"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-outline"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-outline"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-outline"
)
```

#### With Title and Description  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Div(
        H3('New message!', cls='font-bold'),
        Div('You have 1 unread message', cls='text-xs')
    ),
    Button('See', cls='btn btn-sm'),
    role='alert',
    cls='alert alert-vertical sm:alert-horizontal w-full '
)
```

#### Dash Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-dash"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-dash"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-dash"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-dash"
)
```