Tag
An bage displays a short advisory information for the user that is not important enough to justify an alert.
| Install | yarn add @diallink-corp/convergo-react-tag |
|---|---|
| Version | 4.1.2 |
| Usage | import {Tag} from '@diallink-corp/convergo-react-tag' |
Colors
The tag component supports three color schemas: primary, secondary, and danger.
<div>
<Tag color="primary">
<span>Yesterday</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
</Tag>
<Tag color="danger">
<span>Tomorrow</span>
</Tag>
<br />
<Tag color="primary">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Yesterday</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<Tag color="danger">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Tomorrow</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<br />
<Tag color="primary">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="XMarkIcon" variant="outline" />
</Pressable>
</Tag>
<Tag color="secondary">
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronLeftIcon" variant="outline" />
</Pressable>
<span>Pressable icon</span>
</Tag>
<Tag color="danger">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronRightIcon" variant="outline" />
</Pressable>
</Tag>
<br />
<Tag color="primary">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag color="secondary">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag color="danger">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<br />
<Tag color="primary">
<span>1</span>
</Tag>
<Tag color="secondary">
<span>2</span>
</Tag>
<Tag color="danger">
<span>3</span>
</Tag>
<br />
<Tag color="primary">A</Tag>
<Tag color="secondary">B</Tag>
<Tag color="danger">C</Tag>
</div><div>
<Tag color="primary">
<span>Yesterday</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
</Tag>
<Tag color="danger">
<span>Tomorrow</span>
</Tag>
<br />
<Tag color="primary">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Yesterday</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<Tag color="danger">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Tomorrow</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<br />
<Tag color="primary">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="XMarkIcon" variant="outline" />
</Pressable>
</Tag>
<Tag color="secondary">
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronLeftIcon" variant="outline" />
</Pressable>
<span>Pressable icon</span>
</Tag>
<Tag color="danger">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronRightIcon" variant="outline" />
</Pressable>
</Tag>
<br />
<Tag color="primary">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag color="secondary">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag color="danger">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<br />
<Tag color="primary">
<span>1</span>
</Tag>
<Tag color="secondary">
<span>2</span>
</Tag>
<Tag color="danger">
<span>3</span>
</Tag>
<br />
<Tag color="primary">A</Tag>
<Tag color="secondary">B</Tag>
<Tag color="danger">C</Tag>
</div><div>
<Tag color="primary">
<span>
Yesterday
</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
</Tag>
<Tag color="danger">
<span>
Tomorrow
</span>
</Tag>
<br />
<Tag color="primary">
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
<span>
Yesterday
</span>
</Tag>
<Tag color="secondary">
<span>Today</span>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Tag>
<Tag color="danger">
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
<span>
Tomorrow
</span>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Tag>
<br />
<Tag color="primary">
<span>
Pressable icon
</span>
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="XMarkIcon"
variant="outline"
/>
</Pressable>
</Tag>
<Tag color="secondary">
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
</Pressable>
<span>
Pressable icon
</span>
</Tag>
<Tag color="danger">
<span>
Pressable icon
</span>
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Pressable>
</Tag>
<br />
<Tag color="primary">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<Tag color="secondary">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<Tag color="danger">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<br />
<Tag color="primary">
<span>1</span>
</Tag>
<Tag color="secondary">
<span>2</span>
</Tag>
<Tag color="danger">
<span>3</span>
</Tag>
<br />
<Tag color="primary">
A
</Tag>
<Tag color="secondary">
B
</Tag>
<Tag color="danger">
C
</Tag>
</div>Sizes
The tag component supports three different sizes: small, medium, and large. Default one is defined by the theme.
<div>
<Tag size="small">
<span>Yesterday</span>
</Tag>
<Tag size="medium">
<span>Today</span>
</Tag>
<Tag size="large">
<span>Tomorrow</span>
</Tag>
<br />
<Tag size="small">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Yesterday</span>
</Tag>
<Tag size="medium">
<span>Today</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<Tag size="large">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Tomorrow</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<br />
<Tag size="small">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="XMarkIcon" variant="outline" />
</Pressable>
</Tag>
<Tag size="medium">
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronLeftIcon" variant="outline" />
</Pressable>
<span>Pressable icon</span>
</Tag>
<Tag size="large">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronRightIcon" variant="outline" />
</Pressable>
</Tag>
<br />
<Tag size="small">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag size="medium">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag size="large">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<br />
<Tag size="small">
<span>1</span>
</Tag>
<Tag size="medium">
<span>2</span>
</Tag>
<Tag size="large">
<span>3</span>
</Tag>
<br />
<Tag size="small">A</Tag>
<Tag size="medium">B</Tag>
<Tag size="large">C</Tag>
</div><div>
<Tag size="small">
<span>Yesterday</span>
</Tag>
<Tag size="medium">
<span>Today</span>
</Tag>
<Tag size="large">
<span>Tomorrow</span>
</Tag>
<br />
<Tag size="small">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Yesterday</span>
</Tag>
<Tag size="medium">
<span>Today</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<Tag size="large">
<Icon name="ChevronLeftIcon" variant="outline" />
<span>Tomorrow</span>
<Icon name="ChevronRightIcon" variant="outline" />
</Tag>
<br />
<Tag size="small">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="XMarkIcon" variant="outline" />
</Pressable>
</Tag>
<Tag size="medium">
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronLeftIcon" variant="outline" />
</Pressable>
<span>Pressable icon</span>
</Tag>
<Tag size="large">
<span>Pressable icon</span>
<Pressable onPress={() => alert('icon was pressed!')}>
<Icon name="ChevronRightIcon" variant="outline" />
</Pressable>
</Tag>
<br />
<Tag size="small">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag size="medium">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<Tag size="large">
<Icon name="XMarkIcon" variant="outline" />
</Tag>
<br />
<Tag size="small">
<span>1</span>
</Tag>
<Tag size="medium">
<span>2</span>
</Tag>
<Tag size="large">
<span>3</span>
</Tag>
<br />
<Tag size="small">A</Tag>
<Tag size="medium">B</Tag>
<Tag size="large">C</Tag>
</div><div>
<Tag size="small">
<span>
Yesterday
</span>
</Tag>
<Tag size="medium">
<span>Today</span>
</Tag>
<Tag size="large">
<span>
Tomorrow
</span>
</Tag>
<br />
<Tag size="small">
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
<span>
Yesterday
</span>
</Tag>
<Tag size="medium">
<span>Today</span>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Tag>
<Tag size="large">
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
<span>
Tomorrow
</span>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Tag>
<br />
<Tag size="small">
<span>
Pressable icon
</span>
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="XMarkIcon"
variant="outline"
/>
</Pressable>
</Tag>
<Tag size="medium">
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="ChevronLeftIcon"
variant="outline"
/>
</Pressable>
<span>
Pressable icon
</span>
</Tag>
<Tag size="large">
<span>
Pressable icon
</span>
<Pressable
onPress={() =>
alert(
'icon was pressed!'
)}
>
<Icon
name="ChevronRightIcon"
variant="outline"
/>
</Pressable>
</Tag>
<br />
<Tag size="small">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<Tag size="medium">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<Tag size="large">
<Icon
name="XMarkIcon"
variant="outline"
/>
</Tag>
<br />
<Tag size="small">
<span>1</span>
</Tag>
<Tag size="medium">
<span>2</span>
</Tag>
<Tag size="large">
<span>3</span>
</Tag>
<br />
<Tag size="small">
A
</Tag>
<Tag size="medium">
B
</Tag>
<Tag size="large">
C
</Tag>
</div>