Tag
A small label used to categorize, filter, or highlight an item.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
const ARTICLES = [Installation
npx sdaia-ui@latest add tag
Usage
import { Tag } from "@/components/ui/tag"<Tag>Label</Tag>Examples
Size
Use the `size` prop to change the size of the tag.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
export default function TagSize() {Default
The default text-only tag.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
export default function TagDefault() {With Icon
Use `action="Icon"` to add a trailing icon to the tag.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
export default function TagWithIcon() {With Count
Use `action="Count"` to display a numeric count inside the tag.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
export default function TagWithCount() {With Dot
Use `leading="Dot"` to display a status dot before the label.
Loading preview…
1
'use client';2
3
import { Tag } from 'sdaia-ui';4
5
export default function TagWithDot() {API Reference
TagProps
Props for the Tag component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | 'Label' | optional |
size | 'sm' | 'md' | 'lg' | 'lg' | optional |
leading | 'default' | 'icon' | 'country' | 'avatar' | 'dot' | 'default' | optional |
action | 'text-only' | 'icon' | 'count' | 'text-only' | optional |
leadingIcon | ReactNode | - | optional |
trailing | boolean | true | optional |
count | number | 4 | optional |
avatarSrc | string | '/images/avatar.webp' | optional |
flagSrc | string | '/svgs/SaudiFlag.svg' | optional |
dotColor | string | 'rgba(37,147,95,1)' | optional |
onClose | () => void | - | optional |
disabled | boolean | false | optional |