Components

Badge

A status, a category or a count, in any Tailwind colour. A badge is a <div> until it is told to be a button, and a close button inside it makes it removable.

Drawn and behaving as Flux UI's badge does, measured against its live docs.

Badge

BadgeExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeExample : Component
{
    protected override Component? Render() =>
        Ui.Badge.Color(Ui.Color.Lime)["New"];
}

Live result

New

Sizes

BadgeSizesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeSizesExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-end gap-2")[
            Ui.Badge.Sm["Small"],
            Ui.Badge["Default"],
            Ui.Badge.Lg["Large"]
        ];
}

Live result

Small

Default

Large

Icons

An icon before the words, or after them.

BadgeIconsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeIconsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            Ui.Badge.Icon(Ui.IconName.UserCircle)["Users"],
            Ui.Badge.Icon(Ui.IconName.DocumentText)["Files"],
            Ui.Badge.IconTrailing(Ui.IconName.VideoCamera)["Videos"]
        ];
}

Live result

Users

Files

Videos

Rounded

BadgeRoundedExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeRoundedExample : Component
{
    protected override Component? Render() =>
        Ui.Badge.Rounded().Icon(Ui.IconName.User)["Users"];
}

Live result

Users

As button

A press runs C#: the count is a field on the example.

BadgeButtonExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeButtonExample : Component
{
    private int _amount = 1;

    protected override Component? Render() =>
        Ui.Badge.As(Ui.BadgeAs.Button).Rounded().Icon(Ui.IconName.Plus).Lg
            .OnClick(() => { _amount++; })[$"Amount {_amount}"];
}

Live result

With close button

A Ui.BadgeClose inside it makes it removable; removing is the page's.

BadgeCloseExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeCloseExample : Component
{
    private readonly List<string> _roles = ["Admin", "Editor", "Billing"];

    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            _roles.Select(role => Ui.Badge.Key(role)[
                role,
                Ui.BadgeClose.Aria("label", "Remove " + role).OnClick(() => { _roles.Remove(role); })
            ])
        ];
}

Live result

Admin

Editor

Billing

Colors

BadgeColorsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeColorsExample : Component
{
    private static readonly Ui.Color?[] Colors =
    [
        null, Ui.Color.Red, Ui.Color.Orange, Ui.Color.Amber, Ui.Color.Yellow, Ui.Color.Lime, Ui.Color.Green,
        Ui.Color.Emerald, Ui.Color.Teal, Ui.Color.Cyan, Ui.Color.Sky, Ui.Color.Blue, Ui.Color.Indigo,
        Ui.Color.Violet, Ui.Color.Purple, Ui.Color.Fuchsia, Ui.Color.Pink, Ui.Color.Rose,
    ];

    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            Colors.Select(color => Ui.Badge.Key(color?.ToString() ?? "Zinc").Color(color)[color?.ToString() ?? "Zinc"])
        ];
}

Live result

Zinc

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Solid variant

BadgeSolidExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeSolidExample : Component
{
    private static readonly Ui.Color?[] Colors =
    [
        null, Ui.Color.Red, Ui.Color.Orange, Ui.Color.Amber, Ui.Color.Yellow, Ui.Color.Lime, Ui.Color.Green,
        Ui.Color.Emerald, Ui.Color.Teal, Ui.Color.Cyan, Ui.Color.Sky, Ui.Color.Blue, Ui.Color.Indigo,
        Ui.Color.Violet, Ui.Color.Purple, Ui.Color.Fuchsia, Ui.Color.Pink, Ui.Color.Rose,
    ];

    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            Colors.Select(color => Ui.Badge.Key(color?.ToString() ?? "Zinc").Solid.Color(color)[color?.ToString() ?? "Zinc"])
        ];
}

Live result

Zinc

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Inset

Takes its padding back, so it sits in a heading's line without making it taller.

BadgeInsetExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BadgeInsetExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Heading.Lg["Page builder ", Ui.Badge.Color(Ui.Color.Lime).Inset(Ui.Inset.Top | Ui.Inset.Bottom)["New"]],
            Ui.Text.Class("mt-2")["Easily author new pages without leaving your browser."]
        ];
}

Live result

Page builder

New

Easily author new pages without leaving your browser.

Reference

`Ui.Badge`

flux:badge

A status, a category or a count. Its children are its words.

Step	Takes	What it does
`.Color(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	Its colour. Zinc when unset.
`.Size(…)`	`Ui.BadgeSize` Base Sm Lg Each is a step of its own too, unless an HTML tag has its name.	How big it is. Base when unset.
`.Variant(…)`	`Ui.BadgeVariant` Soft Solid Each is a step of its own too, unless an HTML tag has its name.	How it is filled. Soft when unset.
`.Rounded()`	`bool`	Rounds the ends fully, with the wider padding a round end needs.
`.Icon(…)`	`Ui.IconName` — one of 317 names	An icon before the words.
`.IconTrailing(…)`	`Ui.IconName` — one of 317 names	An icon after the words.
`.IconVariant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of the icons. Micro, the size of the line, when unset.
`.As(…)`	`Ui.BadgeAs` Div Button Each is a step of its own too, unless an HTML tag has its name.	The element it is: a button to press with OnClick. A div when unset.
`.Inset(…)`	`Ui.Inset` None Top Bottom Left Right All Combined with \|.	The sides whose padding is taken back, for a badge in a line of text.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.

`Ui.BadgeClose`

flux:badge.close

The button inside a badge that removes it. Its OnClick does the removing.

Step	Takes	What it does
`.Icon(…)`	`Ui.IconName` — one of 317 names	The icon it shows. XMark when unset.
`.IconVariant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of the icon. Micro when unset.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.