Alert

Status message that displays contextual feedback or notifications.

Source Tailwind CSS

Note

This is a default alert — check it out!

package showcase

import (
	"github.com/templui/templui/internal/components/alert"
	"github.com/templui/templui/internal/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 alert

Examples

Destructive

Error

Your session has expired. Please log in again.

package showcase

import (
	"github.com/templui/templui/internal/components/alert"
	"github.com/templui/templui/internal/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
`ID` Unique identifier for the alert element.	`string`	-
`Class` Additional CSS classes to apply to the alert.	`string`	-
`Attributes` Additional HTML attributes to apply to the alert element.	`templ.Attributes`	-
`Variant` Visual style variant. Options: 'default', 'destructive'.	`Variant`	`default`

Title

Alert title component for the main heading.

Name	Type	Default
`ID` Unique identifier for the title element.	`string`	-
`Class` Additional CSS classes to apply to the title.	`string`	-
`Attributes` Additional HTML attributes to apply to the title element.	`templ.Attributes`	-

Description

Alert description component for detailed content.

Name	Type	Default
`ID` Unique identifier for the description element.	`string`	-
`Class` Additional CSS classes to apply to the description.	`string`	-
`Attributes` Additional HTML attributes to apply to the description element.	`templ.Attributes`	-

Menu

Getting Started

Components

Alert

Note

Installation

Examples

Error

API Reference

Alert

Title

Description