Tags

Tag

The Tag component is a versatile UI element that can be used as a standalone LabelTag or as part of a TagGroup. The Tag can have a TagIcon and/or a TagText as children.

When using a ButtonTag, it must be wrapped within a ButtonGroup.

Importing

To use the Tag component and its related components, you'll need to import them:

import { Tag, TagIcon, TagText, TagGroup } from '@ef-global/backpack/Tag';

Props

Name	Type	Default	Required	Description
tagType	'label' \| 'button'	'label'	Yes	Determines if the tag is a label or a button.
value	string		Yes	The value associated with the tag.
small	boolean	false	No	Whether the tag is small or not.
filled	boolean	false	No	Whether the label tag is filled or not.
removable	boolean	false	No	Whether the label tag is removable or not.
disabled	boolean	false	No	Whether the button tag is disabled or not.
inverse	boolean	false	No	Whether the tag is styled for a dark background or not.
onClick	React.MouseEventHandler		No	A function to be called when the tag is clicked.
onKeyDown	React.KeyboardEventHandler		No	A function to be called when a key is pressed down while the tag has focus.
className	string		No	A custom classname to be added to the tag.
children	React.ReactNode		No	The content to be displayed inside the tag. Generally used for customizing appearance.

Usage

LabelTag

To create a LabelTag, you can use the Tag component with the tagType prop set to 'label' and a value set. You can also use the TagIcon and TagText subcomponents to customize the content of the tag.

<Tag tagType="label" value="tag">
    <TagIcon>
        <IconAirplane />
    </TagIcon>
    <TagText>Example LabelTag</TagText>
</Tag>

ButtonTag

To create a ButtonTag, use the Tag component with the tagType prop set to 'button' and the value prop set to a unique string. You can also use the TagIcon and TagText subcomponents to customize the content of the tag.

<TagGroup type="multiple">
    <Tag tagType="button" as="button" value="tag1">
        <TagIcon>
            <IconBalloon />
        </TagIcon>
        <TagText>Example ButtonTag 1</TagText>
    </Tag>
    <Tag tagType="button" as="button" value="tag2">
        <TagText>Example ButtonTag 2</TagText>
    </Tag>
</TagGroup>

Customizing appearance

You can use the variant and size props to customize the appearance of label tags. The variant prop accepts values such as 'default', 'outlined', and 'filled'. The size prop accepts values such as 'small', 'medium', and 'large'.

<TagGroup type='multiple'>
    <Tag tagType='label' small={true} value='tag1'>
        <TagIcon>
            <IconBurger />
        </TagIcon>
        <TagText>Small Outlined</TagText>
    </Tag>
    <Tag tagType='label' small={true} filled={true} value='tag1'>
        <TagIcon>
            <IconBurger />
        </TagIcon>
        <TagText>Small Filled</TagText>
    </Tag>
    <Tag tagType='label' value='tag2'>
        <TagIcon>
            <IconBurger />
        </TagIcon>
        <TagText>Regular Outlined</TagText>
    </Tag>
    <Tag tagType='label' filled={true} value='tag2'>
        <TagIcon>
            <IconBurger />
        </TagIcon>
        <TagText>Regular Filled</TagText>
    </Tag>
</TagGroup>

TagGroup

The TagGroup component is used to group multiple tags together. It ensures proper spacing and alignment of the tags within the group.

Props

Prop	Type	Default	Description
inverse	boolean	false	If `true`, the TagGroup will have an inverted appearance.
align	TagGroupAlign	'start'	Determines the alignment of tags within the TagGroup. One of `'start', 'center', 'end', 'stretch'`.
disabled	boolean	false	If `true`, all tags within the TagGroup will be disabled.
className	string		Additional CSS class applied to the TagGroup component.
children	React.ReactNode		The tags to be rendered within the TagGroup.
...rest	ToggleGroupMultipleProps		Any additional props passed will be forwarded to the underlying radix-ui `ToggleGroup.Root` component.

Usage

<TagGroup type="multiple">
  <Tag tagType="label" value="Label 1" />
  <Tag tagType="label" value="Label 2" />
  <Tag tagType="button" as="button" value="Button 1" />
</TagGroup>

TagIcon

The TagIcon component is used to add an icon to the tag.

Props

Name	Type	Default	Required	Description
icon	React.ReactNode		Yes	The icon to be displayed inside the tag.

Usage

<Tag tagType="label" value="Label">
  <TagIcon icon={<MdLabel />} />
</Tag>

TagText

The TagText component is used to customize the text appearance inside the tag. You can use this component to apply custom styling or to include other text-related components.

Props

Name	Type	Default	Required	Description
children	React.ReactNode		Yes	The text content to be displayed in the tag.

Usage

<Tag tagType="label" value="Label">
  <TagText>
    Custom Text
  </TagText>
</Tag>

Tabs Text