GitHub

Tag

PreviousNext

A small colored label, filled or outlined, in the theme's and the palette's colors.

New control
InteractiveTag demo
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <gpui:TagLabel Content="Primary" />
  <gpui:TagLabel Classes="secondary" Content="Secondary" />
  <gpui:TagLabel Classes="danger" Content="Danger" />
  <gpui:TagLabel Classes="success" Content="Success" />
  <gpui:TagLabel Classes="warning" Content="Warning" />
  <gpui:TagLabel Classes="info" Content="Info" />
</WrapPanel>

Usage

gpui:TagLabel (named so because every Avalonia control already has a Tag property) shows its Content on a small bordered label. The color is a class: primary (the default), secondary, danger, success, warning, info, or a palette color: neutral, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. outline keeps the border and gives the text the color. The classes combine, as in Classes="rose outline small". A hovered tag fades to 90%, as in GPUI Kit.

ClassText and padding
xsmall, small10px, 6×2, radius 3
default12px, 10×4
large14px, 10×4
rounded-fullA pill at any size

Examples

outline with each theme color.

Outline
InteractiveTag demo: Outline
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <gpui:TagLabel Classes="outline" Content="Primary" />
  <gpui:TagLabel Classes="secondary outline" Content="Secondary" />
  <gpui:TagLabel Classes="danger outline" Content="Danger" />
  <gpui:TagLabel Classes="success outline" Content="Success" />
  <gpui:TagLabel Classes="warning outline" Content="Warning" />
  <gpui:TagLabel Classes="info outline" Content="Info" />
</WrapPanel>

The sizes, and rounded-full on a small and on a medium tag.

Sizes
InteractiveTag demo: Sizes
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <gpui:TagLabel Classes="xsmall" Content="XSmall" VerticalAlignment="Center" />
  <gpui:TagLabel Classes="small" Content="Small" VerticalAlignment="Center" />
  <gpui:TagLabel Content="Medium" VerticalAlignment="Center" />
  <gpui:TagLabel Classes="large" Content="Large" VerticalAlignment="Center" />
  <gpui:TagLabel Classes="small rounded-full" Content="Rounded" VerticalAlignment="Center" />
  <gpui:TagLabel Classes="rounded-full" Content="Rounded" VerticalAlignment="Center" />
</WrapPanel>

The nineteen palette colors, filled and with outline.

Colors
InteractiveTag demo: Colors
<StackPanel Spacing="12" HorizontalAlignment="Left">
  <WrapPanel ItemSpacing="8" LineSpacing="8" MaxWidth="560">
    <gpui:TagLabel Classes="neutral" Content="Neutral" />
    <gpui:TagLabel Classes="gray" Content="Gray" />
    <gpui:TagLabel Classes="red" Content="Red" />
    <gpui:TagLabel Classes="orange" Content="Orange" />
    <gpui:TagLabel Classes="amber" Content="Amber" />
    <gpui:TagLabel Classes="yellow" Content="Yellow" />
    <gpui:TagLabel Classes="lime" Content="Lime" />
    <gpui:TagLabel Classes="green" Content="Green" />
    <gpui:TagLabel Classes="emerald" Content="Emerald" />
    <gpui:TagLabel Classes="teal" Content="Teal" />
    <gpui:TagLabel Classes="cyan" Content="Cyan" />
    <gpui:TagLabel Classes="sky" Content="Sky" />
    <gpui:TagLabel Classes="blue" Content="Blue" />
    <gpui:TagLabel Classes="indigo" Content="Indigo" />
    <gpui:TagLabel Classes="violet" Content="Violet" />
    <gpui:TagLabel Classes="purple" Content="Purple" />
    <gpui:TagLabel Classes="fuchsia" Content="Fuchsia" />
    <gpui:TagLabel Classes="pink" Content="Pink" />
    <gpui:TagLabel Classes="rose" Content="Rose" />
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <gpui:TagLabel Classes="blue outline" Content="Blue" />
    <gpui:TagLabel Classes="rose outline" Content="Rose" />
  </WrapPanel>
</StackPanel>

Not covered

  • Arbitrary color combinations (TagVariant::Custom); set Background, Foreground and BorderBrush directly.