components/badge
データ表示 · 18 / 64

Badge

ui.widgets.Badge

控えめな状態表示、件数、セマンティックカラーのラベル。

BEHAVIOR CONTRACT

info / success / warning / error、サイズ、dot、アイコン付きバリアントはテーマ token に従います。

RECORDED INTERACTION

すべてのセマンティックカラーとサイズを一巡します。

examples/storybook/stories.zig:463
// ── Badge / StatusBadge ──
pub fn buildBadge(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const r1 = try row(cx, 12);
    inline for (.{ "info", "success", "warning", "error" }, .{ W.badge.BadgeStatus.info, .success, .warning, .@"error" }) |t, st| {
        try r1.appendChild(a, try W.Badge(.{ .text = t, .status = st }).mount(scope, cx));
    }
    try c.appendChild(a, try label(cx, "Badge status"));
    try c.appendChild(a, r1);

    const r2 = try row(cx, 12);
    try r2.appendChild(a, try W.Badge(.{ .count = 5 }).mount(scope, cx));
    try r2.appendChild(a, try W.Badge(.{ .count = 120, .max_count = 99 }).mount(scope, cx));
    try r2.appendChild(a, try W.Badge(.{ .dot = true }).mount(scope, cx));
    try c.appendChild(a, try label(cx, "Count / dot"));
    try c.appendChild(a, r2);

    // ── 尺寸 ──
    try c.appendChild(a, try label(cx, "Sizes (sm / md)"));
    const r_sz = try row(cx, 12);
    inline for (.{ W.badge.BadgeSize.sm, .md }) |sz| {
        try r_sz.appendChild(a, try W.Badge(.{ .count = 8, .size = sz }).mount(scope, cx));
    }
    try c.appendChild(a, r_sz);

    const r3 = try row(cx, 12);
    try r3.appendChild(a, try W.StatusBadge(.{ .label_text = "Online", .status = .success }).mount(scope, cx));
    try r3.appendChild(a, try W.StatusBadge(.{ .label_text = "Error", .status = .@"error" }).mount(scope, cx));
    try c.appendChild(a, try label(cx, "StatusBadge"));
    try c.appendChild(a, r3);
    return c;
}
GitHub でソースを見るexamples/storybook/stories.zig:463

Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。

zenit · デュアルライセンスオープンソースプロジェクトは GPL-3.0-only のもとで無料で使えます。クローズドソースや商用製品には商用ライセンスが必要です。作者への連絡先:zongyi.xzy#gmail.com(# を @ に置き換え)zenit 5f9add5+wip 2026-09-30