Badge

A short piece of text that can be used to display a status or a label.

Properties

Color, Variant, AppearanceOverride

Use the Color, Variant and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc, white, gray, black. Available variants differ per color and can be viewed in the UI demo below.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color and Variant as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

solid

Code block has not loaded. An error may have occurred.

Padding

Type

Code block has not loaded. An error may have occurred.

ContentSpacing

Type

Code block has not loaded. An error may have occurred.

Text

Type

Code block has not loaded. An error may have occurred.

Icon

Type

Code block has not loaded. An error may have occurred.

TrailingIcon

Type

Code block has not loaded. An error may have occurred.

Content

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Theming

States

State	Description
Base

Colors

Color	Description
Background
Stroke
Text