Chip: Blazor chip component

Examples

Colors

Every semantic Color, from Default to Dark.

Default Billing API Mobile Docs Resolved Pending Blocked Internal

website/Examples/DataDisplay/ChipColorsExample.razor Source

Variants and sizes

Filled, Outlined and Text (soft), in three sizes.

Filled Outlined Soft

Small Medium Large

website/Examples/DataDisplay/ChipVariantsExample.razor Source

Closable

Handle OnClose to show the close button; the chip passes itself so you can read its Value.

BillingUrgentEnterpriseAPI

website/Examples/DataDisplay/ChipClosableExample.razor Source

Filter chips

OnClick turns a chip into a toggle button.

Showing: Production

website/Examples/DataDisplay/ChipFilterExample.razor Source

Playground

Billing

ChildContent

Color Color

Variant Variant

Size Size

Icon

<Chip Color="Color.Primary" Size="Size.Large" Icon="tag">Billing</Chip>

API

<Chip>

DaisyBlazor

Parameters

CloseIcon string
= null
Close icon ligature for the optional close button.
Color Color
= Color.Default
Semantic color mapped to the daisyUI badge-{color} class; defaults to no color class.
Icon string
= null
Leading icon ligature.
Size Size
= Size.Medium
Badge size: Small maps to badge-sm, Large to badge-lg; Medium (default) adds no class.
Text string
= null
Text shown when no ChildContent is supplied.
Value object
= null
Backing value for selection scenarios. Untyped — the chip never reads it; it is carried purely so the caller can identify this chip in its own dispatch.
Variant Variant
= Variant.Filled
Visual style: Outlined maps to badge-outline, Text to badge-soft; Filled (default) adds none.
Class string
= null
Extra CSS classes merged onto the root badge element.
Style string
= null
Inline CSS styles applied to the root badge element.

Name	Type	Default	Description
CloseIcon	string	null	Close icon ligature for the optional close button.
Color	Color	Color.Default	Semantic color mapped to the daisyUI badge-{color} class; defaults to no color class.
Icon	string	null	Leading icon ligature.
Size	Size	Size.Medium	Badge size: Small maps to badge-sm, Large to badge-lg; Medium (default) adds no class.
Text	string	null	Text shown when no ChildContent is supplied.
Value	object	null	Backing value for selection scenarios. Untyped — the chip never reads it; it is carried purely so the caller can identify this chip in its own dispatch.
Variant	Variant	Variant.Filled	Visual style: Outlined maps to badge-outline, Text to badge-soft; Filled (default) adds none.
Class	string	null	Extra CSS classes merged onto the root badge element.
Style	string	null	Inline CSS styles applied to the root badge element.

Events

OnClick EventCallback<MouseEventArgs>
Click handler; when set the chip renders as a <button> instead of a <span>.
OnClose EventCallback<Chip>
Raised when the close button is clicked; rendering it requires a delegate.

Name	Type	Description
OnClick	EventCallback<MouseEventArgs>	Click handler; when set the chip renders as a <button> instead of a <span>.
OnClose	EventCallback<Chip>	Raised when the close button is clicked; rendering it requires a delegate.

Content

ChildContent RenderFragment
Chip content; when set it replaces Text.

Name	Type	Description
ChildContent	RenderFragment	Chip content; when set it replaces Text.

From MudChip

Chip keeps MudChip's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.