var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var p=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},r=(a,e,t,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!u.call(a,i)&&i!==t&&l(a,i,{get:()=>e[i],enumerable:!(c=h(e,i))||c.enumerable});return a};var z=(a,e,t)=>(t=a!=null?d(T(a)):{},r(e||!a||!a.__esModule?l(t,"default",{value:a,enumerable:!0}):t,a)),f=a=>r(l({},"__esModule",{value:!0}),a);var o=p((y,s)=>{s.exports=_jsx_runtime});var j={};b(j,{default:()=>k,frontmatter:()=>x});var n=z(o()),x={id:"tag",title:"Tag",category:"data-display",package:"@chakra-ui/tag",description:"Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them."};function g(a){let e=Object.assign({h2:"h2",p:"p",ul:"ul",li:"li",strong:"strong",pre:"pre",code:"code"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.p,{children:"Chakra UI exports 5 Tag related components:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Tag"}),": The wrapper for all the tag elements."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"TagLabel"}),": The label for tag's text content."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"TagLeftIcon"}),": The icon placed on the left side of the tag."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"TagRightIcon"}),": The icon placed on the right side of the tag."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"TagCloseButton"}),": The close button for the tag."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Tag, TagLabel, TagLeftIcon, TagRightIcon, TagCloseButton, } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`Sample Tag `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` {['sm', 'md', 'lg'].map((size) => ( Teal ))} `})}),` `,(0,n.jsx)(e.h2,{id:"with-left-icon",children:"With left icon"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` {['sm', 'md', 'lg'].map((size) => ( Cyan ))} `})}),` `,(0,n.jsx)(e.h2,{id:"with-right-icon",children:"With right icon"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` {['sm', 'md', 'lg'].map((size) => ( Blue ))} `})}),` `,(0,n.jsx)(e.h2,{id:"with-close-button",children:"With close button"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` {['sm', 'md', 'lg'].map((size) => ( Green ))} `})}),` `,(0,n.jsx)(e.h2,{id:"with-custom-element",children:"With custom element"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Segun `})})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(g,a)})):g(a)}var k=S;return f(j);})(); ;return Component;

Tag

size

variant

`size`

`variant`