Nostalgic Piano Music

    @chakra-ui/tag
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.8 • Public • Published

    Tag

    This component is displayed as an accessible tag with an optional link and/or button to remove it.

    Installation

    yarn add @chakra-ui/tag

    Import component

    import { Tag } from "@chakra-ui/tag"

    Basic Usage

    <Tag />

    Sizes

    Pass the size prop to change the size of the tag.

    <>
      <Tag size="sm" colorScheme="gray">
        Gray
      </Tag>
      <Tag colorScheme="gray">Gray</Tag>
      <Tag size="lg" colorScheme="gray">
        Gray
      </Tag>
    </>

    Color

    Pass the colorScheme prop to change the background color of the tag component

    <>
      <Tag colorScheme="pink">Pink</Tag>
    </>

    With icon

    The tag component can contain an Icon. This is done by using the TagIcon component within the tag component.

    <>
      <Tag colorScheme="cyan">
        <TagIcon size="12px" as={AddIcon} />
        <TagLabel>Green</TagLabel>
      </Tag>
    </>

    With close button

    Use the TagCloseButton to apply a close button to the tag component.

    <Tag variant="solid" size="sm" colorScheme="cyan">
      <TagLabel>Tab Label</TagLabel>
      <TagCloseButton />
    </Tag>

    With custom element

    Tag component can contain a custom element. This is done by placing the custom element within the tag component.

    <Tag size="lg" colorScheme="red" borderRadius="full">
      <Avatar
        src="https://bit.ly/sage-adebayo"
        size="xs"
        name="Segun Adebayo"
        ml={-1}
        mr={2}
      />
      <TagLabel>Segun</TagLabel>
      <TagCloseButton />
    </Tag>

    Install

    npm i @chakra-ui/tag

    DownloadsWeekly Downloads

    322,953

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828