Tag

Tag, you're it! With our Tags, categorizing and navigating items is a playful breeze

Default

1  import { Tag, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox justify='center'>
4    <Tag>Default</Tag>
5  </FlexBox>
6

Component	Description
Tag	The Tag component is an interface element used for items that need to be labeled, categorized, or organized using keywords. Tags can also be used as navigational aids. In the Sugarcoat UI library, the Tag component is a small, interactive element that can provide quick information in a compact form

Prop	Type	Default	Explanation
`size`	`string`	md	Adjusts the size of the tag. It can take values like "xs", "sm", "md", "lg", which correspond to different dimensions.
`color`	`string`	default	Modifies the color of the tag. It shares the same values as Badge
`block`	`boolean`	false	Make the Badge a block element, filling the width of its parent.
`removable`	`boolean`	true	When set to true, includes a small 'x' button on the tag for removal purposes.
`onRemove`	`function`		A function which gets triggered when the 'x' button is clicked.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius