Floe UI LogoFloe UI
DocsComponentsBadge

Badge

Data Display

Small status labels and tags with multiple visual variants.

Preview

DefaultSecondaryOutlineDestructive

Variants

Default
Default
Secondary
Secondary
Outline
Outline
Destructive
Destructive

Usage

badge.rs
use floe_ui::components::badge;

"text-zinc-500">// Default (primary) badge
let b1 = badge::primary("New", &tokens);

"text-zinc-500">// Secondary badge
let b2 = badge::secondary("Draft", &tokens);

"text-zinc-500">// Outline badge
let b3 = badge::outline("v1.0", &tokens);

"text-zinc-500">// Destructive badge
let b4 = badge::destructive("Removed", &tokens);

API Reference

Props / Parameters

NameTypeDescription
label&strBadge text content
tokens&DesignTokensDesign tokens for theming

Style Functions

default_style(tokens)
secondary_style(tokens)
outline_style(tokens)
destructive_style(tokens)

Style functions return closures compatible with Iced's .style() method.

Builder Functions

primary(label, tokens)
secondary(label, tokens)
outline(label, tokens)
destructive(label, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/badge.rs