Buoy Component
Dual-segment badge (label + value) with variants, theme colors, shapes, and sizes.
Notes
- Use
.buoy as a container with data-role="label" and data-role="value" children.
- Prefer shorthand compound variants like
buoy-outline-primary over buoy-outline buoy-primary — smaller CSS output.
- An empty
data-role="label" is automatically hidden.
Basic usage
Default buoy
Versionv2.1.0
Downloads12.5k
BuildPassed
Reverse (.buoy-reverse) — swaps segment colors
Versionv2.1.0
BuildPassed
Empty label — auto hidden
Value only
Variants
Outline (.buoy-outline) — light tint
Versionv2.1.0
Muted (.buoy-muted) — thin border
Versionv2.1.0
Solid (.buoy-solid) — dark fill
Versionv2.1.0
Theme colors
Shorthand compound variants
Outline (.buoy-outline-*)
Primaryv1
Successv1
Errorv1
Muted (.buoy-muted-*) — thin border
Primaryv1
Successv1
Errorv1
Subtle (.buoy-subtle-*) — borderless tint
Primaryv1
Successv1
Errorv1
Solid (.buoy-solid-*) — dark fill
Primaryv1
Successv1
Errorv1
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]
Default variant
green-200ok
green-500ok
[blue]ok
Solid variant
green-200ok
green-500ok
[blue]ok
Outline variant
green-500ok
[blue]ok
Subtle variant
green-500ok
[blue]ok
Muted variant
green-500ok
[blue]ok
Shapes
Rounded (.buoy-rounded)
Versionv1
Fluid (.buoy-fluid)
Versionv1
Square (.buoy-square) — sharp corners
Versionv1
Circle (.buoy-pill) — pill shape
Versionv1
Sizes (buoy-4 ~ buoy-15)