Tag

Tags represent a status, or a common denominator. They make sections and entities quickly identifiable and searchable.

Examples

Sizes

By default, the size property has a regular value, but you can also set it to small.

Rio de Janeiro

Rio de Janeiro

Palettes

By default, the palette property has the lightBlue value, but you can also set it to the following values: red, orange, green, cyan, teal, gray and purple.

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Rio de Janeiro

Deletable

You can add the handleDelete property to configure the tag as deletable. When this function is defined the tag will have a button where you can handle click events.

Rio de Janeiro

Icon

You can add one Icon on the left side of the Tag. Just use the icon property.

Rio de Janeiro

Usage

import { Tag } from '@vtex/admin-ui'

function Example() {
  return (
    <Tag
      icon={<IconHeart />}
      label="Here goes the label!"
      handleDelete={() => window.alert('Tag deleted')}
    />
  )
}

Props

Name	Type	Description	Required	Default
label	string	Tag size	✅	-
csx	StyleObject	Custom styles	🚫	{}
palette	'lightBlue', 'green', 'red', 'orange', 'cyan', 'teal', 'purple'	Tag theme	🚫	'blue', 'gray'
size	'regular', 'small'	Tag size	🚫	'regular'
handleDelete	() => void	When defined the tag is deletable	🚫	-
icon	ReactNode	Tag icon	🚫	-

Do’s

1. Use semantic colors that have a clear and contextualized meaning in your application, such as green for success and red for errors. However, if your application employs a richer palette with unambiguous usage of colors don't hesitate to use your Tags with them.
2. They should always be read-only.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• Examples
  • Sizes
  • Palettes
  • Deletable
  • Icon