Alert

Alert shows a short status message block.

github.com/fastygo/templ/components

Summary

Alert shows a short status message block.Alert uses role status and aria-live polite.

Use Cases

Show form validation summary

Show destructive action warning text

Show success confirmation message

Semantics

Root element is section

Role defaults to status

AriaLive defaults to polite

Children carry the visible message body

Example variant.default

Static alert with role status.

import "github.com/fastygo/templ/ui"
import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "default"}) {
		@ui.Text(ui.TextProps{Class: "text-sm"}, "Static alert with role status.")
	}
}

import "github.com/fastygo/templ/ui"
import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "default"}) {
		@ui.Text(ui.TextProps{Class: "text-sm"}, "Static alert with role status.")
	}
}

Example variant.destructive

Something went wrong.

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "destructive"}) {
		Something went wrong.
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "destructive"}) {
		Something went wrong.
	}
}

Example variant.success

Changes saved.

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "success"}) {
		Changes saved.
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "success"}) {
		Changes saved.
	}
}

Example variant.warning

Review settings before you continue.

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "warning"}) {
		Review settings before you continue.
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Alert(cmp.AlertProps{Variant: "warning"}) {
		Review settings before you continue.
	}
}

API

AriaLive · string — role: live-region-politeness; enum: off|polite|assertive; default: polite

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension

Role · string — role: live-region-role; default: status

Variant · string — role: appearance; enum: default|destructive|success|warning; default: default; source: utils.recipes.AlertVariants