Badge

Use it well.

Use meaningful text so color is not the only status cue. Badge itself is not a live announcement or action.

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/GothUI/v2026/components"

templ ExampleBadge() {
	<div class="cluster">
		@components.Badge(components.BadgeProps{Text: "Ready", Tone: components.ToneSuccess})
		@components.Badge(components.BadgeProps{Text: "In progress", Tone: components.ToneInfo})
		@components.Badge(components.BadgeProps{Text: "Needs review", Tone: components.ToneWarning})
	</div>
}