A tag group controls the layout and alignment for a collection of tags.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/tag-group`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/tag-group, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`alignment`
Description	Sets whether the tags should be aligned to the start or the end of the component.
Type	`"end" \| "start"`

`children`
Required
Description	Tags to render within the tag group.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`label`
Description	Refers to an `aria-label` attribute. Sets an accessible name for the tags group wrapper to announce it to users of assistive technology. Usage of either this, or the `titleId` attribute is strongly recommended.
Type	`string`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<any>`

`titleId`
Description	ID referenced by the tag group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group-button title element. Usage of either this, or the `label` attribute is strongly recommended.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.