Tag Status

Status indicators with optional dots and different color variants.

DraftPaidErrorProcessing

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusDefault() {
	<div class="flex items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Draft", Status: "orange"})
		@popui.TagStatus(props.TagStatus{Label: "Paid", Status: "green"})
		@popui.TagStatus(props.TagStatus{Label: "Error", Status: "red"})
		@popui.TagStatus(props.TagStatus{Label: "Processing", Status: "yellow"})
	</div>
}

With Dot

Add a dot indicator using the Dot prop.

Draft Paid Error

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusWithDot() {
	<div class="flex items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Draft", Status: "orange", Dot: true})
		@popui.TagStatus(props.TagStatus{Label: "Paid", Status: "green", Dot: true})
		@popui.TagStatus(props.TagStatus{Label: "Error", Status: "red", Dot: true})
		@popui.TagStatus(props.TagStatus{Dot: true, Status: "blue"})
	</div>
}

Colors

Available color variants for different statuses.

GreyGreenYellowRedOrangeBluePurpleOliveTealCrimsonSteel BlueEmpty

1234567891011121314151617181920212223
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TagStatusColors() {
	<div class="flex flex-wrap items-center gap-2">
		@popui.TagStatus(props.TagStatus{Label: "Grey", Status: "grey"})
		@popui.TagStatus(props.TagStatus{Label: "Green", Status: "green"})
		@popui.TagStatus(props.TagStatus{Label: "Yellow", Status: "yellow"})
		@popui.TagStatus(props.TagStatus{Label: "Red", Status: "red"})
		@popui.TagStatus(props.TagStatus{Label: "Orange", Status: "orange"})
		@popui.TagStatus(props.TagStatus{Label: "Blue", Status: "blue"})
		@popui.TagStatus(props.TagStatus{Label: "Purple", Status: "purple"})
		@popui.TagStatus(props.TagStatus{Label: "Olive", Status: "olive"})
		@popui.TagStatus(props.TagStatus{Label: "Teal", Status: "teal"})
		@popui.TagStatus(props.TagStatus{Label: "Crimson", Status: "crimson"})
		@popui.TagStatus(props.TagStatus{Label: "Steel Blue", Status: "steelBlue"})
		@popui.TagStatus(props.TagStatus{Label: "Empty", Status: "empty"})
	</div>
}

API Reference

TagStatus

Status tag component with color variants and optional dot indicator.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tag element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tag element
`Label`	`string`	-	Text label displayed in the tag
`Status`	`string`	`grey`	Color variant: grey, green, yellow, red, orange, blue, purple, olive, teal, crimson, steelBlue, empty
`Dot`	`bool`	`false`	Whether to display a colored dot indicator