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

<c-tag>Sample Tag</c-tag>

With custom attributes :

Sample tag

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

With different sizes :

Sample tag

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

With left icon

Sample Tag

<c-tag size="sm" color-scheme="purple">  <c-tag-left-icon name="add" />  <c-tag-label>Sample Tag</c-tag-label></c-tag><c-tag size="md" color-scheme="purple">  <c-tag-left-icon name="add" />  <c-tag-label>Sample Tag</c-tag-label></c-tag><c-tag size="lg" color-scheme="purple">  <c-tag-left-icon name="add" />  <c-tag-label>Sample Tag</c-tag-label></c-tag>

With right icon

Sample Tag

<c-tag size="lg" variant="solid" color-scheme="green">  <c-tag-label>Sample Tag</c-tag-label>  <c-tag-right-icon name="check"/></c-tag>

With close button

Sample Tag

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

With custom element

Sample Tag

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

Edit this page on GitHub