Tag

Tags allow users to categorize, label or organize content using keywords.

There are two methods available for creating tag components: utilizing content properties or employing children projection.

Content properties

To include an icon, label, and a tag button within a tag, you can utilize the properties icon, label, and dismissible.

home

Tag with icon

Tag without icon

Tag with a tag-button

<Tag label="Tag with icon" icon={<Icon icon="home" />} dismissible={false}></Tag>
<Tag label="Tag without icon" dismissible={false}></Tag>
<Tag label="Tag with a tag-button" dismissible></Tag>

dismissible

By default, a tag possesses a TagButton that alters its appearance upon hovering. To have a tag without a tag button, simply set dismissible=false.

icon

To select an appropriate icon, please consult the Icon component documentation.

The icon can either be of string type or have one of the following type:

type IconType = {
  icon: string,
  classes?: string,
  lib?: IconLibType,
  size?: IconSizeType,
  variant?: IconVariantType,
};

Tag with business icon

<Tag
  label="Tag with business icon"
  icon={<Icon icon="applied_settings" lib="business" />}
  dismissible="false"
></Tag>

Children projection

Alternatively, you can use children projection to incorporate tag buttons, icons, and typography within a tag component. This approach provides you with greater control over the tag's layout and content.

<Tag dismissible={false}>Tag</Tag>
<Tag dismissible={false}>
  <Icon icon="train"></Icon>
  <Typography>Tag</Typography>
</Tag>
<Tag dismissible={false}>
  <Icon icon="train"></Icon>
  <Typography>Tag with icon</Typography>
</Tag>
<Tag dismissible={false}>
  <Icon icon="train"></Icon>
  <Typography>Tag with icon</Typography>
  <TagButton>
    <Icon icon="close"></Icon>
  </TagButton>
</Tag>

Shape

There are two border tag styles, the default shape is rounded. You can set shape attribute to rounded to make a rounded tag or to sharp to make sharp tag.

Default Tag

Rounded Tag

Sharp Tag

<Tag label="Default Tag"></Tag>
<Tag label="Rounded Tag" shape="rounded"></Tag>
<Tag shape="sharp" label="Sharp Tag"></Tag>

Sizes

The tag comes in 2 different sizes: small, medium. By default the size attribute has medium value.

train

Small Tag

train

Medium Tag

train

Small Tag

train

Medium Tag

<Tag size="small" icon={<Icon icon="train" />} label="Small Tag"></Tag>
<Tag size="medium" icon={<Icon icon="train" />} label="Medium Tag"></Tag>
<Tag shape="sharp" size="small" icon={<Icon icon="train" />} label="Small Tag"></Tag>
<Tag shape="sharp" size="medium" icon={<Icon icon="train" />} label="Medium Tag"></Tag>

Interactive tag

Interactive

With interactive attribute, the tags change appearance on press, hover, and click.

Tag

<Tag interactive label="Tag"></Tag>
<Tag interactive>
  <Typography>Tag</Typography>
</Tag>
<Tag interactive dismissible="false">
  <Typography>Tag</Typography>
  <TagButton>
    <Icon icon="close"></Icon>
  </TagButton>
</Tag>

Selected

You can style a selected tag by adding selected attribute to this element.

Tag

<Tag interactive selected label="Tag"></Tag>
<Tag interactive selected>
  <Typography>Tag</Typography>
</Tag>
<Tag interactive selected dismissible="false">
  <Typography>Tag</Typography>
  <TagButton>
    <Icon icon="close"></Icon>
  </TagButton>
</Tag>

Colors

Tags are available in 8 colors: primary, lightblue, green, orange, red, yellow, bluegrey, and purple. The default color is the primary color: color="primary".

Primary

Light blue

Green

Orange

Red

Yellow

Bluegrey

Purple

<!-- Primary -->
<Tag interactive color="primary" label="Tag"></Tag>
<Tag interactive color="primary" selected label="Selected Tag"></Tag>
<Tag interactive color="primary" disabled label="Disabled Tag"></Tag>

API

Loading API documentation...