Feedback

TwChip

TwChip is a Blazor chip component for tags and filters. Set Label, Color, Variant, Size, StartIcon, Avatar and Href, or make it Closable with OnClose.

Last updated 24 September 2026

Basic Usage

Group chips with TwChipGroup for automatic wrapping and layout.

React Vue Angular Svelte Blazor

Razor

<TwChipGroup>
    <TwChip Label="React" Color="Color.Primary" />
    <TwChip Label="Vue" Color="Color.Success" />
    <TwChip Label="Angular" Color="Color.Danger" />
    <TwChip Label="Svelte" Color="Color.Accent" />
    <TwChip Label="Blazor" Color="Color.Accent" />
</TwChipGroup>

Sizes

Use Size to render a smaller or larger chip. Defaults to ChipSize.Medium.

Small Medium Large

Razor

<TwChipGroup Class="items-center">
    <TwChip Label="Small" Color="Color.Primary" Size="ChipSize.Small" />
    <TwChip Label="Medium" Color="Color.Primary" Size="ChipSize.Medium" />
    <TwChip Label="Large" Color="Color.Primary" Size="ChipSize.Large" />
</TwChipGroup>

Colors

Group chips with TwChipGroup for automatic wrapping and layout.

Primary

Accent

Success

Danger

Warning

Info

Light

Dark

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    <TwChipGroup>
        @if (c != Color.Light && c != Color.Dark)
        {
            <div class="p-3">
                <TwChip Label="@c.ToString()" Color="@c" />
            </div>
        }
        else
        {
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwChip Label="@c.ToString()" Color="@c" />
            </div>
        }
    </TwChipGroup>
}

Closable Chips

Use Closable and OnClose to create removable tags.

JavaScriptTypeScriptReactNode.jsMongoDB

Razor

<TwChipGroup>
    @foreach (var tag in tags)
    {
        <TwChip Label="@tag"
                Color="Color.Primary"
                Closable
                OnClose="@(() => RemoveTag(tag))" />
    }
</TwChipGroup>

CSHARP

@code {
    private readonly List<string> tags = new() { "JavaScript", "TypeScript", "React", "Node.js", "MongoDB" };
    
    private void RemoveTag(string tag)
    {
        tags.Remove(tag);
    }
}

Alignment & Spacing

Control alignment with Alignment and adjust spacing with Class="gap-*".

Center aligned with custom spacing

Chip 1 Chip 2 Chip 3

End aligned with tight spacing

Tight Spacing Example

Razor

<div class="space-y-6">
    <div>
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Center aligned with custom spacing</p>
        <TwChipGroup Alignment="center" Class="gap-4">
            <TwChip Label="Chip 1" Color="Color.Success" Variant="ButtonVariant.Outlined" />
            <TwChip Label="Chip 2" Color="Color.Success" Variant="ButtonVariant.Outlined" />
            <TwChip Label="Chip 3" Color="Color.Success" Variant="ButtonVariant.Outlined" />
        </TwChipGroup>
    </div>

    <div>
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">End aligned with tight spacing</p>
        <TwChipGroup Alignment="end" Class="gap-1">
            <TwChip Label="Tight" Color="Color.Accent" Variant="ButtonVariant.Outlined" Size="ChipSize.Small" />
            <TwChip Label="Spacing" Color="Color.Accent" Variant="ButtonVariant.Outlined" Size="ChipSize.Small" />
            <TwChip Label="Example" Color="Color.Accent" Variant="ButtonVariant.Outlined" Size="ChipSize.Small" />
        </TwChipGroup>
    </div>
</div>

With Icons & Variants

Add icons with StartIcon/EndIcon and use different variants for various use cases.

Skills with start icons

C# Blazor ASP.NET SQL

Actions with end icons

Download Share Delete

Status indicators

Active Pending Inactive Error

Razor

<div class="mb-6">
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Skills with start icons</p>
    <TwChipGroup Class="gap-3">
        <TwChip Label="C#" StartIcon="Icon.Code" Color="Color.Accent" Variant="ButtonVariant.Filled" />
        <TwChip Label="Blazor" StartIcon="Icon.Lightning" Color="Color.Primary" Variant="ButtonVariant.Filled" />
        <TwChip Label="ASP.NET" StartIcon="Icon.Globe" Color="Color.Success" Variant="ButtonVariant.Filled" />
        <TwChip Label="SQL" StartIcon="Icon.Database" Color="Color.Accent" Variant="ButtonVariant.Filled" />
    </TwChipGroup>
</div>

<div class="mb-6">
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Actions with end icons</p>
    <TwChipGroup Class="gap-3">
        <TwChip Label="Download" EndIcon="Icon.Download" Color="Color.Primary" Variant="ButtonVariant.Outlined" />
        <TwChip Label="Share" EndIcon="Icon.Share" Color="Color.Success" Variant="ButtonVariant.Outlined" />
        <TwChip Label="Delete" EndIcon="Icon.Trash" Color="Color.Danger" Variant="ButtonVariant.Outlined" />
    </TwChipGroup>
</div>

<div>
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Status indicators</p>
    <TwChipGroup>
        <TwChip Label="Active" Color="Color.Success" Variant="ButtonVariant.Filled" Size="ChipSize.Small" />
        <TwChip Label="Pending" Color="Color.Accent" Variant="ButtonVariant.Filled" Size="ChipSize.Small" />
        <TwChip Label="Inactive" Color="Color.Primary" Variant="ButtonVariant.Outlined" Size="ChipSize.Small" />
        <TwChip Label="Error" Color="Color.Danger" Variant="ButtonVariant.Filled" Size="ChipSize.Small" />
    </TwChipGroup>
</div>

With Avatars

Use the Avatar property to display initials or text at the start of the chip.

JDJohn Doe SSSarah Smith MJMike Johnson AAdmin

Razor

<TwChipGroup Class="gap-3">
    <TwChip Label="John Doe" Avatar="JD" Color="Color.Primary" Variant="ButtonVariant.Filled" />
    <TwChip Label="Sarah Smith" Avatar="SS" Color="Color.Accent" Variant="ButtonVariant.Filled" />
    <TwChip Label="Mike Johnson" Avatar="MJ" Color="Color.Success" Variant="ButtonVariant.Filled" />
    <TwChip Label="Admin" Avatar="A" Color="Color.Accent" Variant="ButtonVariant.Filled" Size="ChipSize.Small" />
</TwChipGroup>

Link Chips

Use Href to make chips navigable. Use Target for external links.

Documentation GitHub API Reference

Razor

<TwChipGroup Class="gap-3">
    <TwChip Label="Documentation" Href="/" StartIcon="Icon.Book" Color="Color.Primary" Variant="ButtonVariant.Outlined" />
    <TwChip Label="GitHub" Href="https://github.com" Target="_blank" StartIcon="Icon.Github" Color="Color.Primary" Variant="ButtonVariant.Outlined" />
    <TwChip Label="API Reference" Href="/" EndIcon="Icon.Arrow_Right" Color="Color.Accent" Variant="ButtonVariant.Filled" />
</TwChipGroup>

Disabled State

Use the Disabled property to make chips non-interactive.

Enabled Disabled Disabled Outlined Disabled with Icon

Razor

<TwChipGroup>
    <TwChip Label="Enabled" Color="Color.Primary" Variant="ButtonVariant.Filled" />
    <TwChip Label="Disabled" Color="Color.Primary" Variant="ButtonVariant.Filled" Disabled />
    <TwChip Label="Disabled Outlined" Color="Color.Accent" Variant="ButtonVariant.Outlined" Disabled />
    <TwChip Label="Disabled with Icon" StartIcon="Icon.Lock" Color="Color.Primary" Variant="ButtonVariant.Filled" Disabled />
</TwChipGroup>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwChipTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`CloseButton`	string
`Sm`	string
`Md`	string
`Lg`	string

Full reference: TwChipTheme on the API docs.