Tag

import { Tag } from "anolis-ui";

export type TagVariant = "solid" | "outline" | "clear";

export interface TagThemeProps extends ComplementThemeProps, PseudoProp {

}

Tag component for labeling, categorizing etc.

Solid tag

<Tag>Solid tag</Tag>

Variants

You can use 4 variants of tag. Just use v prop.

Solid tag

Outline tag

Clear tag

<x.div spaceX="4">
  <Tag>Solid tag</Tag>
  <Tag v="outline">Outline tag</Tag>
  <Tag v="clear">Clear tag</Tag>
</x.div>

With icon

Icon can be added to the Tag, both left and right positions

Solid tag

<Tag leftIcon={<DownIcon/>} rightIcon={<DownIcon/>}>Solid tag</Tag>