TagGroup

The props declared for TagGroup, generated from the types @proyecto-viviana/ui ships.

Import

import { TagGroup } from "@proyecto-viviana/ui";

Props

Props for TagGroup in @proyecto-viviana/ui
Prop	Type	Default	Description
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label for the tag group.
`children`*	(item: T) => JSX.Element	—	Function to render each tag or each tag's content.
`size`	'S' \| 'M' \| 'L' \| 'sm' \| 'md' \| 'lg'	`'M'`	S2 tag size. Legacy sm/md/lg aliases map to S/M/L.
`variant`	'default' \| 'outline' \| 'solid'	—	Legacy visual variant. Prefer `isEmphasized` for S2 parity.
`isEmphasized`	false \| true	—	Whether selected tags use the emphasized accent fill.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description text shown below the tag list.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message shown when invalid.
`isInvalid`	false \| true	—	Whether the group is invalid.
`labelPosition`	'top' \| 'side'	—	Position of the label relative to the tag list.
`labelAlign`	'start' \| 'end'	—	Text alignment for side labels.
`groupActionLabel`	string	—	Label for the optional group action button.
`onGroupAction`	() => void	—	Handler for the optional group action button.
`maxRows`	number	—	Maximum visible rows. This is approximated with overflow clipping in Solid.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`style`	JSX.CSSProperties	—	Backward-compatible inline style alias. Prefer UNSAFE_style for S2 parity.
`onAction`	(key: Key) => void	—	Handler called when a tag is activated.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	Reference to description element. solidaria-components
`aria-label`	string	—	Custom aria-label. solidaria-components
`aria-labelledby`	string	—	Reference to external label element. solidaria-components
`isDisabled`	false \| true	—	Whether the tag list is disabled. solidaria-components
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode for the tag list. solidaria-components
`selectedKeys`	Iterable<Key>	—	The currently selected keys (controlled). solidaria-components
`defaultSelectedKeys`	Iterable<Key>	—	The default selected keys (uncontrolled). solidaria-components
`items`*	T[]	—	The items to display in the tag list. solidaria-components
`selectionBehavior`	'toggle' \| 'replace'	—	How selection behaves in the collection. solidaria-components
`getKey`	(item: T) => Key	—	Function to get a unique key from an item. solidaria-components
`disabledKeys`	Iterable<Key>	—	Keys that are disabled. solidaria-components
`renderEmptyState`	() => JSX.Element	—	Content to render when the list is empty. solidaria-components
`onRemove`	(keys: Set<Key>) => void	—	Handler called when tags are removed. solidaria-components

Declared in packages/viviana-ui/src/tag-group/index.tsx.

Tag props

Props for Tag in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content of the tag.
`isEmphasized`	false \| true	—	Whether selected tags use the emphasized accent fill. Inherited from TagGroup.
`size`	'S' \| 'M' \| 'L' \| 'sm' \| 'md' \| 'lg'	—	S2 tag size. Inherited from TagGroup.
`href`	string	—	Href retained for API parity; rendered as a tag action in the current Solid primitive.
`target`	string	—	Link target retained for API parity.
`rel`	string	—	Link relationship retained for API parity.
`onAction`	(key: Key) => void	—	Handler called when this tag is activated.
`class`	string	—	Additional CSS class name. Use only as a last resort.
`style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	A ref to the tag's DOM element (merged with the internal collection ref). solidaria-components
`id`*	Key	—	A unique key for this tag. solidaria-components
`isDisabled`	false \| true	—	Whether the tag is disabled. solidaria-components
`textValue`	string	—	A text value for accessibility. solidaria-components

Declared in packages/viviana-ui/src/tag-group/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.