Tag

Implementation#

import { Tag } from "slipstream-ui";

const Example = () => <Tag />;

Color#

Example

Tag Text

<Tag bg="gray">...</Tag>
<Tag bg="red">...</Tag>
<Tag bg="blue">...</Tag>
<Tag bg="gray" shade="900" color="white">...</Tag>
<Tag bg="red" shade="900" color="white">...</Tag>
<Tag bg="blue" shade="900" color="white">...</Tag>

Size#

Example

Tag Text

<Tag size="sm">...</Tag>
<Tag size="md">...</Tag>
<Tag size="lg">...</Tag>

Rounded#

Example

Tag Text

<Tag rounded="sm">...</Tag>
<Tag rounded="md">...</Tag>
<Tag rounded="lg">...</Tag>
<Tag rounded="full">...</Tag>

Block#

Example

Tag Text

<Tag block />

Props#

Attribute	Type	Value	Default Value	Description
bg	string	e.g. red	gray	Background color
color	string	e.g. blue	text-black	Text color
shade	string/number	e.g. 900	200	Shade of background color
size	string	sm/md/lg	sm	Size of tag
rounded	string	e.g. full	sm	Border radius of tag
block	boolean	true/false	undefined	Change tag from inline to a block element