Hint

Usage

import { Tag } from '@nejcm/docz-theme-extended';

Types

default
info
warning
danger
success

<Tag>default</Tag>
<br />
<Tag type="info">info</Tag>
<br />
<Tag type="warning">warning</Tag>
<br />
<Tag type="danger">danger</Tag>
<br />
<Tag type="success">success</Tag>

<Tag>default</Tag>
<br />
<Tag type="info">info</Tag>
<br />
<Tag type="warning">warning</Tag>
<br />
<Tag type="danger">danger</Tag>
<br />
<Tag type="success">success</Tag>

Sizes

small
default
medium
large

<Tag size="small">small</Tag>
<br />
<Tag>default</Tag>
<br />
<Tag size="medium">medium</Tag>
<br />
<Tag size="large">large</Tag>

<Tag size="small">small</Tag>
<br />
<Tag>default</Tag>
<br />
<Tag size="medium">medium</Tag>
<br />
<Tag size="large">large</Tag>

Radius

10 = 10px
1em
0
3px

<Tag radius={10}> 10 = 10px </Tag>
<br />
<Tag radius="1em"> 1em </Tag>
<br />
<Tag radius={0}> 0 </Tag>
<br />
<Tag radius="3px"> 3px </Tag>

<Tag radius={10}> 10 = 10px </Tag>
<br />
<Tag radius="1em"> 1em </Tag>
<br />
<Tag radius={0}> 0 </Tag>
<br />
<Tag radius="3px"> 3px </Tag>

Custom

3
+99
1
📦 with icon and custom bg color

<Tag circle type="danger">
  3
</Tag>
<br />
<Tag circle type="success">
  <small>+99</small>
</Tag>
<br />
<Tag circle size="large" type="warning">
  <strong>1</strong>
</Tag>
<br />
<Tag style={{ backgroundColor: '#333' }}>
  📦 <strong>with icon and custom bg color</strong>
</Tag>

<Tag circle type="danger">
  3
</Tag>
<br />
<Tag circle type="success">
  <small>+99</small>
</Tag>
<br />
<Tag circle size="large" type="warning">
  <strong>1</strong>
</Tag>
<br />
<Tag style={{ backgroundColor: '#333' }}>
  📦 <strong>with icon and custom bg color</strong>
</Tag>

Props

Prop name	Type	Default	Required	Description
size	`'default' │ 'small' │ 'medium' │ 'large'`	'default'	false	Tag size
type	`'default' │ 'info' │ 'warning' │ 'success' │ 'danger'`	'default'	false	Tag type
circle	`bool`	false	false	Circle shape
radius	`number │ string`	'2rem'	false	Border radius. This prop is overriden by circle.