Tag

Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them.

Import

This package exports the following components :

CTag : The wrapper for all the tag elements.
CTagLabel : The label for tag's text content.
CTagRightIcon : The icon placed on the left side of the tag.
CTagLeftIcon : The icon placed on the right side of the tag.
CTagCloseButton : The close button for the tag.

Usage

Sample Tag :

Sample tag

<CTag>Sample Tag</CTag>

With custom attributes :

Sample tag

<CTag size="md" variant="solid" color-scheme="teal">Sample Tag</CTag>

With different sizes :

Sample tag

<CTag size="sm" variant="solid" color-scheme="teal">Sample Tag</CTag><CTag size="md" variant="solid" color-scheme="teal">Sample Tag</CTag><CTag size="lg" variant="solid" color-scheme="teal">Sample Tag</CTag>

With left icon

Sample Tag

<CTag size="sm" color-scheme="purple">  <CTagLeftIcon name="add" />  <CTagLabel>Sample Tag</CTagLabel></CTag><CTag size="md" color-scheme="purple">  <CTagLeftIcon name="add" />  <CTagLabel>Sample Tag</CTagLabel></CTag><CTag size="lg" color-scheme="purple">  <CTagLeftIcon name="add" />  <CTagLabel>Sample Tag</CTagLabel></CTag>

With right icon

Sample Tag

<CTag size="lg" variant="solid" color-scheme="green">  <CTagLabel>Sample Tag</CTagLabel>  <CTagRightIcon name="check"/></CTag>

With close button

Sample Tag

<CTag size="sm" color-scheme="blue">  <CTag-label>Sample Tag</CTag-label>  <CTag-close-button /></CTag><CTag size="md" color-scheme="blue">  <CTag-label>Sample Tag</CTag-label>  <CTag-close-button /></CTag><CTag size="lg" color-scheme="blue">  <CTag-label>Sample Tag</CTag-label>  <CTag-close-button /></CTag>

With custom element

Sample Tag

<CTag border-radius="full">  <CAvatar 
    name="Zakaria Sahmane" 
    ml="-1"    mr="2" 
    alt="Zakaria Sahmane" 
    src="https://avatars.githubusercontent.com/u/10008963?v=4" 
    size="xs" />  <CTagLabel>Sample Tag</CTagLabel></CTag>

Edit this page on GitHub