Note
This is a default alert — check it out!
package showcase
import (
"github.com/templui/templui/components/alert"
"github.com/templui/templui/components/icon"
)
templ AlertDefault() {
<div class="w-full max-w-xl">
@alert.Alert() {
@icon.Rocket()
@alert.Title() {
Note
}
@alert.Description() {
This is a default alert — check it out!
}
}
</div>
}
Installation
templui add alertimport "github.com/templui/templui/components/alert"Examples
Destructive
Error
Your session has expired. Please log in again.
package showcase
import (
"github.com/templui/templui/components/alert"
"github.com/templui/templui/components/icon"
)
templ AlertDestructive() {
<div class="w-full max-w-xl">
@alert.Alert(alert.Props{Variant: alert.VariantDestructive}) {
@icon.TriangleAlert()
@alert.Title() {
Error
}
@alert.Description() {
Your session has expired. Please log in again.
}
}
</div>
}
API Reference
Required parameter
Hover for description
Alert
Main alert container component for displaying status messages.
| Name | Type | Default |
|---|---|---|
Unique identifier for the alert element. | | - |
Additional CSS classes to apply to the alert. | | - |
Additional HTML attributes to apply to the alert element. | | - |
Visual style variant. Options: 'default', 'destructive'. | | |
Title
Alert title component for the main heading.
| Name | Type | Default |
|---|---|---|
Unique identifier for the title element. | | - |
Additional CSS classes to apply to the title. | | - |
Additional HTML attributes to apply to the title element. | | - |
Description
Alert description component for detailed content.
| Name | Type | Default |
|---|---|---|
Unique identifier for the description element. | | - |
Additional CSS classes to apply to the description. | | - |
Additional HTML attributes to apply to the description element. | | - |
