Tag

Installation#

npmpnpmyarnbun

npx sugarcoat add tag

Default

Multiple Tags

Use the onRemove prop to make tags removable.

Removable

Interactive Tags

Tag Input

Filter Tags

Category Labels

Skill Tags

Selected Items

Import

import { Tag } from "@sugarcoat/ui-nxt";

Usage

// Static tag
<Tag>Category</Tag>

// Removable tag
<Tag onRemove={() => handleRemove()}>
Removable
</Tag>

Prop	Type	Default	Description
children	ReactNode	-	Content of the tag
onRemove	() => void	-	Callback when remove button is clicked. When provided, shows a remove button.
className	string	-	Additional CSS classes
style	CSSProperties	-	Inline styles
onClick	() => void	-	Click handler for the entire tag

Remove button includes aria-label="Remove tag" for screen readers
Click events are properly handled with keyboard support
When used for filtering, consider using role="checkbox" or aria-pressed to indicate selection state
Provide clear visual feedback for interactive states