Tag

A <Tag> is a content component. This component can be used to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

Usage

Import

To import the component you just have to use this code below.


import { Tag } from '@marigold/components';

Appearance

Sorry! There are currently no variants and sizes available.

Group props

Property	Type	Default	Description
`label`	`string`	`none`	Set a label for the select.
`required`	`boolean`	`false`	Set the select required.
`width`	`string \| number`	`full`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
`allowsRemoving`	`boolean`	`false`	Displays a remove button on each tag.
`onRemove`	`(key: Key) => any`	`none`	Handler that is called when the remove button is pressed.
`renderEmptyState`	`(props: TagListRenderProps) => ReactNode`	`none`	Provides content to display when there are no items in the tag list.

Examples

Tags with a label

In this example we have the <Tag> component that has been given the label.

Preview

Code

Removable tags

In this example, the <Tag> component receives tags from a dynamic collection and can remove these tags.

Preview

Code

Thor

Iron Man

Black Panther

Groot