Components

Tag
Storybook

The Tag component serves to provide a visual and semantic way to label, categorize, or mark elements within a user interface. These tags are useful for organizing and highlighting specific information, allowing users to quickly identify the nature or purpose of an item.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Tag from 'dd360-ds/Tag'

1import { Tag } from 'dd360-ds'

Usage

Use the Tag component as shown below:

Label tag

The code snippet below shows how to use the Tag component:

1import { Tag } from 'dd360-ds'
2  
3<Tag text="Label tag" />

Variant

With the prop variant you can customize the color of the Tag

Primary!Success!Secondary!Warning!

1import { Flex, Tag } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex gap="4">
6            <Tag text="Primary!" variant="primary" />
7            <Tag text="Success!" variant="success" />
8            <Tag text="Secondary!" variant="secondary" />
9            <Tag text="Warning!" variant="warning" />
10        </Flex>
11    )
12}

1import { Flex, Tag } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex alignItems="center" gap="4">
6            <Tag text="Primary!" variant="primary" fontSize="small" />
7            <Tag text="Success!" variant="success" fontSize="medium" />
8            <Tag text="Secondary!" variant="secondary" fontSize="large" />
9            <Tag text="Warning!" variant="warning" fontSize="extraLarge" />
10        </Flex>
11    )
12}

Fill

With the prop fill enables the fill of the tag according to the value of the variant prop

Primary!Success!Secondary!Warning!

1import { Flex, Tag } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex alignItems="center" gap="4">
6            <Tag text="Primary!" variant="primary" fill={true} />
7            <Tag text="Success!" variant="success" fill={true} />
8            <Tag text="Secondary!" variant="secondary" fill={true} />
9            <Tag text="Warning!" variant="warning" fill={true} />
10        </Flex>
11    )
12}

Rounded

With the prop rounded you can customize the border radius in the tag

None!Medium!Large!Tag full!

1import { Flex, Tag } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex alignItems="center" gap="4">
6            <Tag text="None!" variant="primary" fill={true} rounded="none" />
7            <Tag text="Medium!" variant="success" fill={true} rounded="md" />
8            <Tag text="Large!" variant="secondary" fill={true} rounded="lg" />
9            <Tag text="Tag full!" variant="warning" fill={true} rounded="full" />
10        </Flex>
11    )
12}

Icon

With the prop icon you can render a custom icon in the Tag before the text, is a optional prop

PrimaryWarningSuccess

1import { Flex, Tag } from 'dd360-ds'
2import {  InformationCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5    return (
6        <Flex gap="4">
7            <Tag text="Primary" icon={InformationCircleIcon} variant="primary" />
8            <Tag text="Warning" icon={InformationCircleIcon} variant="warning" />
9            <Tag text="Success" icon={CheckCircleIcon} variant="success" />
10        </Flex>
11    )
12}

Text

With the props text you can provide a text to the Tag and this prop is the only required of the component

Label tag!

1import { Flex, Tag } from 'dd360-ds'
2
3export default function App() {
4    return (
5        <Flex gap="4">
6            <Tag text="Label tag!" variant="success" />
7        </Flex>
8    )
9}

API Reference

Name	Types	Default
"text"*	string	-
"icon"	React.ElementType	-
"variant"	primary warning secondary success	primary
"fontSize"	small large medium extraLarge	medium
"rounded"	base none sm md lg xl 2xl 3xl full	md
"fill"	boolean	false
"className"	string	-
"classNameIcon"	string	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

TableTimeline