• Chakra UI Vue
  • Installation
  • Using Nuxt
  • Design Principles
  • Styled System
  • Style Props
  • Responsive Styles
  • Components
  • Accordion
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Center
  • Checkbox
  • Close Button
  • Code
  • Collapse
  • Flex
  • Heading
  • Image
  • Input
  • SimpleGrid
  • Stack
  • Tabs
  • Tag
  • Wrap

    • 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

      Sample tag

      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

      Sample Tag

      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

      Sample Tag

      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

      Sample Tag

      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