Flag

Flag

Display country flags using ISO 3166-1 alpha-2 country codes.

CSS required

This component requires the flag-icons CSS library. Use @css.Flag() in your template.

1234567891011121314151617181920
package showcase

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

templ FlagDefault() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			@popui.Flag(props.Flag{
				Country: "ES",
			})
		</body>
	</html>
}

Multiple Countries

Display flags for different countries using ISO 3166-1 alpha-2 codes.

12345678910111213141516171819202122232425
package showcase

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

templ FlagCountries() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex gap-2">
				@popui.Flag(props.Flag{Country: "ES"})
				@popui.Flag(props.Flag{Country: "US"})
				@popui.Flag(props.Flag{Country: "GB"})
				@popui.Flag(props.Flag{Country: "FR"})
				@popui.Flag(props.Flag{Country: "DE"})
				@popui.Flag(props.Flag{Country: "IT"})
			</div>
		</body>
	</html>
}

In Context

Flags work great alongside text labels in lists or forms.

Spain

United States

United Kingdom

12345678910111213141516171819202122232425262728293031
package showcase

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

templ FlagInContext() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex flex-col gap-2">
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "ES"})
					<span class="text-sm">Spain</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "US"})
					<span class="text-sm">United States</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "GB"})
					<span class="text-sm">United Kingdom</span>
				</div>
			</div>
		</body>
	</html>
}

API Reference

Display country flags using the flag-icons library.

Name	Type	Default	Description
`Country` *	`string`	-	ISO 3166-1 alpha-2 country code (e.g., 'ES', 'US', 'GB')
`ID`	`string`	-	Unique identifier for the flag element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the element