Tag

Labels for categorizing, marking, and organizing content.

Import

import { Tag } from 'asterui'

Examples

Basic Tags

Simple tags with preset colors.

</>

DefaultPrimarySecondaryAccentInfoSuccessWarningError

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag>Default</Tag>
        <Tag color="primary">Primary</Tag>
        <Tag color="secondary">Secondary</Tag>
        <Tag color="accent">Accent</Tag>
        <Tag color="info">Info</Tag>
        <Tag color="success">Success</Tag>
        <Tag color="warning">Warning</Tag>
        <Tag color="error">Error</Tag>
      </Space>
    )
}

export default App

Variants

Different style variants for tags.

</>

FilledOutlinedSoftDash

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" variant="filled">Filled</Tag>
        <Tag color="primary" variant="outlined">Outlined</Tag>
        <Tag color="primary" variant="soft">Soft</Tag>
        <Tag color="primary" variant="dash">Dash</Tag>
      </Space>
    )
}

export default App

Closable Tags

Tags that can be closed by the user.

</>

Tag 1Tag 2Tag 3

import { Tag, Space, TagLiveRegion } from 'asterui'
import { useState } from 'react'

function App() {
  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
  
  const handleClose = (tag: string) => {
    setTags(tags.filter((t) => t !== tag));
  };
  
  return (
      <TagLiveRegion />
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <Tag
            key={tag}
            closable
            color="primary"
            onClose={() => handleClose(tag)}
          >
            {tag}
          </Tag>
        ))}
      </Space>
    )
}

export default App

Tags with Icons

Add icons to tags for better visual communication.

</>

ApprovedPending

import { Tag, Space } from 'asterui'
import { CheckCircleIcon, ExclamationCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="success" icon={<CheckCircleIcon size="sm" />}>
          Approved
        </Tag>
        <Tag color="warning" icon={<ExclamationCircleIcon size="sm" />}>
          Pending
        </Tag>
      </Space>
    )
}

export default App

Tag Sizes

Five sizes available for tags.

</>

Extra SmallSmallMediumLargeExtra Large

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" align="center" wrap>
        <Tag color="primary" size="xs">Extra Small</Tag>
        <Tag color="primary" size="sm">Small</Tag>
        <Tag color="primary" size="md">Medium</Tag>
        <Tag color="primary" size="lg">Large</Tag>
        <Tag color="primary" size="xl">Extra Large</Tag>
      </Space>
    )
}

export default App

Custom Colors

Use custom hex colors for unique styling.

</>

RedBlueGreenCyanCrimson

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="#f50">Red</Tag>
        <Tag color="#2db7f5">Blue</Tag>
        <Tag color="#87d068">Green</Tag>
        <Tag color="#108ee9">Cyan</Tag>
        <Tag color="#f5222d">Crimson</Tag>
      </Space>
    )
}

export default App

Link Tags

Tags that navigate to URLs.

</>

GitHubDocumentation

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" href="https://github.com" target="_blank">
          GitHub
        </Tag>
        <Tag color="info" href="/docs">
          Documentation
        </Tag>
      </Space>
    )
}

export default App

Disabled Tags

Tags with disabled state.

</>

Disabled TagDisabled ClosableDisabled Checkable

import { Tag, CheckableTag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" disabled>Disabled Tag</Tag>
        <Tag color="primary" closable disabled>Disabled Closable</Tag>
        <CheckableTag disabled>Disabled Checkable</CheckableTag>
      </Space>
    )
}

export default App

Checkable Tags

Tags that can be toggled on and off.

</>

ReactVueAngularSvelte

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedTags, setSelectedTags] = useState<string[]>(['React']);
  
  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    setSelectedTags(nextSelectedTags);
  };
  
  const tags = ['React', 'Vue', 'Angular', 'Svelte'];
  
  return (
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <CheckableTag
            key={tag}
            checked={selectedTags.includes(tag)}
            onChange={(checked) => handleChange(tag, checked)}
          >
            {tag}
          </CheckableTag>
        ))}
      </Space>
    )
}

export default App

Checkable Tag Colors

Checkable tags with different colors and sizes.

</>

SuccessWarningError

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState([true, false, false]);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={checked[0]}
          onChange={(c) => setChecked([c, checked[1], checked[2]])}
          color="success"
          size="sm"
        >
          Success
        </CheckableTag>
        <CheckableTag
          checked={checked[1]}
          onChange={(c) => setChecked([checked[0], c, checked[2]])}
          color="warning"
          size="md"
        >
          Warning
        </CheckableTag>
        <CheckableTag
          checked={checked[2]}
          onChange={(c) => setChecked([checked[0], checked[1], c])}
          color="error"
          size="lg"
        >
          Error
        </CheckableTag>
      </Space>
    )
}

export default App

Checkable Tags with Icons

Add icons to checkable tags.

</>

LikeStarSave

import { CheckableTag, Space } from 'asterui'
import { HeartIcon, StarIcon, BookmarkIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [liked, setLiked] = useState(false);
  const [starred, setStarred] = useState(true);
  const [saved, setSaved] = useState(false);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={liked}
          onChange={setLiked}
          icon={<HeartIcon size="sm" />}
        >
          Like
        </CheckableTag>
        <CheckableTag
          checked={starred}
          onChange={setStarred}
          icon={<StarIcon size="sm" />}
        >
          Star
        </CheckableTag>
        <CheckableTag
          checked={saved}
          onChange={setSaved}
          icon={<BookmarkIcon size="sm" />}
        >
          Save
        </CheckableTag>
      </Space>
    )
}

export default App

Use Cases

Practical examples of tag usage.

</>

Categories:ReactTypeScriptUI

Status:ActivePendingExpired

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        {/* Article tags */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Categories:</span>
          <Tag color="primary">React</Tag>
          <Tag color="secondary">TypeScript</Tag>
          <Tag color="accent">UI</Tag>
        </Space>
  
        {/* Status indicators */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Status:</span>
          <Tag color="success">Active</Tag>
          <Tag color="warning">Pending</Tag>
          <Tag color="error">Expired</Tag>
        </Space>
      </Space>
    )
}

export default App

API

Tag

Property	Description	Type	Default
closable	Show close icon and enable closing	boolean	false
closeIcon	Custom close icon element	ReactNode	-
onClose	Callback when tag is closed	() => void	-
color	Tag color (preset or custom hex)	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | string	-
icon	Icon element to display before text	ReactNode	-
size	Tag size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
variant	Tag style variant	'filled' | 'outlined' | 'soft' | 'dash'	'filled'
visible	Controlled visibility state	boolean	-
disabled	Disable interactions	boolean	false
href	Render tag as a link	string	-
target	Link target (when href is set)	string	-
children	Tag content	ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for the component	string	'tag'
aria-label	Accessible label (used in close button announcement)	string	-

CheckableTag

Property	Description	Type	Default
checked	Whether tag is checked	boolean	false
onChange	Callback when checked state changes	(checked: boolean) => void	-
icon	Icon element to display before text	ReactNode	-
size	Tag size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
color	Tag color when checked	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost'	'primary'
disabled	Disable interactions	boolean	false
children	Tag content	ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for the component	string	'checkable-tag'

Accessibility

• Close button includes descriptive aria-label (e.g., “Remove Tag 1”)
• CheckableTag uses role="checkbox" with proper aria-checked state
• Keyboard accessible - close and toggle actions work with Enter/Space
• Visible focus indicators on all interactive elements
• TagLiveRegion announces tag removals to screen readers
• aria-disabled attribute set when disabled
• Color contrast meets WCAG guidelines for preset colors