Chip

Usage

The chip component represents small, interactive elements used to display information, tags, or actions.

Chip

<LumexChip>Chip</LumexChip>

Disabled

Disable a chip to prevent user interaction, making it non-clickable and visually muted.

Chip

<LumexChip Disabled="@true">Chip</LumexChip>

Sizes

Adjust the size for small to large chips.

Small

Medium

Large

<div class="flex items-center gap-4">
    <LumexChip Size="@Size.Small">Small</LumexChip>
    <LumexChip Size="@Size.Medium">Medium</LumexChip>
    <LumexChip Size="@Size.Large">Large</LumexChip>
</div>

Radius

Control the border radius for rounded or squared chips.

None

Small

Medium

Large

Full

<div class="flex items-center gap-4">
    <LumexChip Radius="@Radius.None">None</LumexChip>
    <LumexChip Radius="@Radius.Small">Small</LumexChip>
    <LumexChip Radius="@Radius.Medium">Medium</LumexChip>
    <LumexChip Radius="@Radius.Large">Large</LumexChip>
    <LumexChip Radius="@Radius.Full">Full</LumexChip>
</div>

Colors

Customize the chip’s theme color.

Default

Primary

Secondary

Success

Warning

Danger

Info

<div class="flex items-center gap-4">
    <LumexChip Color="@ThemeColor.Default">Default</LumexChip>
    <LumexChip Color="@ThemeColor.Primary">Primary</LumexChip>
    <LumexChip Color="@ThemeColor.Secondary">Secondary</LumexChip>
    <LumexChip Color="@ThemeColor.Success">Success</LumexChip>
    <LumexChip Color="@ThemeColor.Warning">Warning</LumexChip>
    <LumexChip Color="@ThemeColor.Danger">Danger</LumexChip>
    <LumexChip Color="@ThemeColor.Info">Info</LumexChip>
</div>

Variants

Choose between different visual styles such as solid, bordered, or flat.

Solid

Outlined

Flat

Shadow

Light

Dot

<div class="flex items-center gap-4">
    <LumexChip Variant="@ChipVariant.Solid" Color="@ThemeColor.Primary">Solid</LumexChip>
    <LumexChip Variant="@ChipVariant.Outlined" Color="@ThemeColor.Primary">Outlined</LumexChip>
    <LumexChip Variant="@ChipVariant.Flat" Color="@ThemeColor.Primary">Flat</LumexChip>
    <LumexChip Variant="@ChipVariant.Shadow" Color="@ThemeColor.Primary">Shadow</LumexChip>
    <LumexChip Variant="@ChipVariant.Light" Color="@ThemeColor.Primary">Light</LumexChip>
    <LumexChip Variant="@ChipVariant.Dot" Color="@ThemeColor.Primary">Dot</LumexChip>
</div>

Start & End Content

Add icons or elements to the beginning or end of a chip.

Chip

<div class="flex gap-4">
    <LumexChip Color="@ThemeColor.Success"
               Variant="@ChipVariant.Flat">
        <StartContent>
            <LumexIcon Icon="@Icons.Rounded.CheckCircle" Size="@new("18")" />
        </StartContent>
        <ChildContent>
            Chip
        </ChildContent>
    </LumexChip>

    <LumexChip Color="@ThemeColor.Secondary"
               Variant="@ChipVariant.Flat">
        <ChildContent>
            Chip
        </ChildContent>
        <EndContent>
            <LumexIcon Icon="@Icons.Rounded.Notifications" Size="@new("18")" />
        </EndContent>
    </LumexChip>
</div>

Avatar

Embed an avatar in the chip to visually represent users or entities.

Avatar

<div class="flex gap-4">
    <LumexChip Variant="@ChipVariant.Flat">
        <AvatarContent>
            <LumexAvatar Src="https://i.pravatar.cc/150?img=2" Name="Daniel" />
        </AvatarContent>
        <ChildContent>
            Avatar
        </ChildContent>
    </LumexChip>

    <LumexChip Variant="@ChipVariant.Flat">
        <AvatarContent>
            <LumexAvatar Name="Daniel" Initials="@((name) => name[0].ToString())" />
        </AvatarContent>
        <ChildContent>
            Avatar
        </ChildContent>
    </LumexChip>
</div>

Close Button

Add a close button to allow the user to dismiss the chip.

If you pass the OnClose parameter, the close button will be visible. You can override the close icon by passing the EndContent parameter.

Chip

<div class="flex gap-4">
    <LumexChip OnClose="@OnClose">Chip</LumexChip>
</div>

@code {
    private void OnClose( MouseEventArgs args )
    {
        // ...
    }
}

List of Chips

Display multiple chips as a group for tag-like or multi-value selection UI.

Apple

Banana

Cherry

Watermelon

Orange

<div class="flex items-center gap-4">
    @foreach( var fruit in _fruits )
    {
        <LumexChip Variant="@ChipVariant.Flat"
                   OnClose="@((args) => OnClose(args, fruit))">
            @fruit
        </LumexChip>
    }
</div>

@code {
    private string[] _data = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"];
    private List<string> _fruits;

    public ListOfChips()
    {
        _fruits = [.. _data];
    }

    private void OnClose( MouseEventArgs args, string fruit )
    {
        _fruits.RemoveAll( f => f == fruit );

        if( _fruits.Count < 1 )
        {
            _fruits = [.. _data];
        }
    }
}

Custom Styles

This component supports named slots that allow you to apply custom CSS to specific parts of the component.

Base: The main container for the chip component.
Content: The inner wrapper of the chip. It is visible when the variant is `Dot`.
Dot: The small dot on the left side of the chip.
CloseButton: The button that dismisses the chip.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The CSS class names to style the wrapper.
Classes: The CSS class names to style the slots.

New

<LumexChip Variant="@ChipVariant.Shadow"
           Classes="@_classes">
    New
</LumexChip>

@code {
    private ChipSlots _classes = new()
    {
        Base = "bg-radial-[at_50%_0%] from-sky-200 via-blue-400 to-indigo-900 to-90% border border-sky-100 shadow-sky-200",
        Content = "drop-shadow text-white"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Chip

On this page