Tag

Installation

yarn add @neokit/tag

Import

import { Tag } from '@neokit/tag';

Basic Usage

<Tag>Concesionario</Tag>

Tag icon

To add an icon to the tag, use the icon property.

You can also pass the iconBoxSize prop to change the size of the icon.

<Tag icon={ <Certificate /> }>Concesionario</Tag>
<Tag icon={ <Certificate /> } iconBoxSize="14px">Concesionario</Tag>

Tag variants

Use the variant prop to change the visual style of the Tag. You can set the value to outline, filled, skew or circle.

<Tag icon={ <Map /> } iconBoxSize="14px" variant="outline">Santiago de surco, Lima, Lima</Tag>
<Tag icon={ <Certificate /> } iconBoxSize="14px" variant="filled">Concesionario</Tag>
<Tag variant="skew">PREMIUM</Tag>
<Tag icon={ <Certificate /> } variant="circle" />

Tag sizes

Use the size prop to change the size of the tag. You can set the value to md, sm.

<Tag variant="skew" size="md">Height 40</Tag>
<Tag variant="skew" size="sm">Height 28</Tag>