Tag 10.17.4

ARIA
RTL

Tags represent a set of interactive keywords that help organize and categorize objects. Tags can be added or removed from an object.

Default

Default
"use client";

import { Tag } from "@heathmont/moon-core-tw";

const Default = () => <Tag>Default</Tag>;

export default Default;

    Size

    The Tag component offers an optional size property, which by default has the value xs. To modify the sizing, simply assign the value 2xs to the size property.

    2XS size
    XS size
    "use client";

import { Tag } from "@heathmont/moon-core-tw";

const Size = () => (
  <>
    <Tag size="2xs">2XS size</Tag>
    <Tag>XS size</Tag>
  </>
);

export default Size;

      With icons

      The Tag component supports passing optional icons through the iconLeft and iconRight properties.

      Left icon
      Right icon
      Both icons
      "use client";

import { Tag } from "@heathmont/moon-core-tw";
import { ControlsClose, OtherFrame } from "@heathmont/moon-icons-tw";

const WithIcons = () => (
  <>
    <Tag iconLeft={<OtherFrame />}>Left icon</Tag>
    <Tag iconRight={<ControlsClose />}>Right icon</Tag>
    <Tag iconLeft={<OtherFrame />} iconRight={<ControlsClose />}>
      Both icons
    </Tag>
  </>
);

export default WithIcons;

        Letter casing

        By default, the Tag component displays text in uppercase. To display the text in lowercase, set the isUppercase property to false.

        Default
        Lowercase
        "use client";

import { Tag } from "@heathmont/moon-core-tw";

const Casing = () => (
  <>
    <Tag>Default</Tag>
    <Tag isUppercase={false}>Lowercase</Tag>
  </>
);

export default Casing;

          Customization

          You can use the className property to assign any CSS classes to the Tag component.

          Customized
          "use client";

import { Tag } from "@heathmont/moon-core-tw";

const Customization = () => (
  <Tag className="rounded-none bg-roshi-10 text-roshi">Customized</Tag>
);

export default Customization;

            Tag

            These are props specific to the Tag component:

            Name
            Type
            Default
            children
            		"React.ReactNode"-
            className
            		string-
            iconLeft
            		"React.ReactElement"-
            iconRight
            		"React.ReactElement"-
            isUppercase
            		booleantrue
            size
            		"2xs" | "xs"xs