Tag

Loading...

<CTag label="I'm a tag" />

Fold/Expand Code

Themes

Loading...

<div className="c-row c-gutter-x-md c-items-center">
  <div>
    <CTag label="Primary (default)" />
  </div>
  <div>
    <CTag label="Secondary" theme="secondary" />
  </div>
  <div>
    <CTag label="Warning" theme="warning" />
  </div>
  <div>
    <CTag label="Negative" theme="negative" />
  </div>
</div>

Fold/Expand Code

Rounded

Loading...

<CTag rounded label="A rounded tag" />

Fold/Expand Code

Closeable

Loading...

<div className="c-row c-gutter-x-md c-items-center">
  <div>
    <CTag label="xs tag" size="xs" />
  </div>
  <div>
    <CTag label="sm tag" size="sm" />
  </div>
  <div>
    <CTag label="md tag (default)" />
  </div>
  <div>
    <CTag label="lg tag" size="lg" />
  </div>
  <div>
    <CTag label="xl tag" size="xl" />
  </div>
</div>

Fold/Expand Code

Closeable

Loading...

<div className="c-row c-gutter-x-md c-items-center">
  <div>
    <CTag closeable label="A closeable tag" size="xs" theme="secondary" />
  </div>
  <div>
    <CTag closeable label="A closeable tag" size="sm" />
  </div>
  <div>
    <CTag closeable label="A closeable tag" theme="warning" />
  </div>
  <div>
    <CTag closeable label="A closeable tag" size="lg" />
  </div>
  <div>
    <CTag closeable label="A closeable tag" size="xl" theme="negative" />
  </div>
</div>

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data