Flag Component

Corner flag/badge shapes for decorative labeling: triangle, circle, horn, ribbon, and diamond. Supports position modifiers, size modifiers, and dynamic colors.

Notes

5 shapes: .flag-triangle, .flag-circle, .flag-horn, .flag-ribbon, .flag-diamond.
Positions: default (start-top), .flag-end-top (right-top), .flag-start-bottom (left-bottom), .flag-end-bottom (right-bottom).
Sizes: .flag-sm, .flag-lg, .flag-xl.
Color: flag-* dynamic utilities (e.g. flag-primary, flag-success, flag-red-500).
Shapes require a child element: <span class="flag-triangle">HOT. Circle shape can use direct text content.

Triangle (flag-triangle)

Default (start-top)

HOT

Positions

HOT

Sizes

NEW

SALE

VIP

Circle (flag-circle)

Default

HOT

Positions

HOT

Colors

✓

⚠

Horn (flag-horn)

Default

HOT

Positions

HOT

Ribbon (flag-ribbon)

Default

HOT

Positions

HOT

Colors

FEATURED

INFO

PREMIUM

Diamond (flag-diamond)

Default

HOT

Positions

HOT

Colors + sizes

ERROR

PRIMARY

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

HOT HOT HOT HOT

All shapes

TRI CIR HORN RIB