Tag

A Tag represents an attribute or state of the associated element.

📦1.14 KB

Overview

Tag
import { Tag } from "@camome/core/Tag";
export default function Default() {
return <Tag>Tag</Tag>;
}

Variant

SolidSoftOutlineGhost
import { Tag } from "@camome/core/Tag";
import styles from "./styles.module.scss";
export default function Variant() {
return (
<div className={styles.container}>
<Tag variant="solid">Solid</Tag>
<Tag variant="soft">Soft</Tag>
<Tag variant="outline">Outline</Tag>
<Tag variant="ghost">Ghost</Tag>
</div>
);
}

Color schemes

PrimaryNeutralInfoSuccessWarnDanger
import { Tag } from "@camome/core/Tag";
import styles from "./styles.module.scss";
export default function ColorScheme() {
return (
<div className={styles.container}>
<Tag colorScheme="primary">Primary</Tag>
<Tag colorScheme="neutral">Neutral</Tag>
<Tag colorScheme="info">Info</Tag>
<Tag colorScheme="success">Success</Tag>
<Tag colorScheme="warn">Warn</Tag>
<Tag colorScheme="danger">Danger</Tag>
</div>
);
}

Size

SmallMediumLarge
import { Tag } from "@camome/core/Tag";
import styles from "./styles.module.scss";
export default function Size() {
return (
<div className={styles.container}>
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
</div>
);
}

With decorators

WebsiteOnlineNext.jsAltJean Doe
import LinkIcon from "@heroicons/react/24/outline/LinkIcon";
import WifiIcon from "@heroicons/react/24/outline/WifiIcon";
import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
import { Avatar } from "@camome/core/Avatar";
import { IconButton } from "@camome/core/IconButton";
import { Tag } from "@camome/core/Tag";
import styles from "./styles.module.scss";
export default function Decorators() {
return (
<div className={styles.container}>
<Tag
component="a"
href="#"
size="md"
startDecorator={<LinkIcon strokeWidth="2.5" />}
>
Website
</Tag>
<Tag
size="md"
variant="solid"
startDecorator={<WifiIcon strokeWidth="2.2" />}
>
Online
</Tag>
<Tag
size="md"
colorScheme="success"
endDecorator={
<IconButton variant="ghost" colorScheme="success" aria-label="Delete">
<XMarkIcon strokeWidth="2" />
</IconButton>
}
className={styles["with-close"]}
>
Next.js
</Tag>
<Tag
size="md"
startDecorator={
<Avatar size="sm" src="https://i.imgur.com/isPfQ2E.jpg" alt="Alt" />
}
className={styles["with-avatar"]}
>
Jean Doe
</Tag>
</div>
);
}