Skip to content

Latest commit

 

History

History
117 lines (59 loc) · 2.38 KB

token-group.md

File metadata and controls

117 lines (59 loc) · 2.38 KB
Raw

Token group (TokenGroup)

A set of compact representations of an individual item selected from a list.

Properties

alignment

Specifies the direction in which tokens are aligned (horizontal | vertical).

Type: String

Default: "horizontal"

Valid values: horizontal | vertical

Required: No

className

Adds the specified classes to the root element of the component.

Type: String

Required: No

i18nStrings

An object containing all the necessary localized strings required by the component.

Type:

TokenGroupProps.I18nStrings {
  limitShowFewer?: string
  limitShowMore?: string
}

Required: No

id

Adds the specified ID to the root element of the component.

Type: String

Required: No

items

An array of objects representing token items. Each token has the following properties:

  • label (string) - Title text of the token.
  • description (string) - (Optional) Further information about the token that appears below the label.
  • disabled [boolean] - (Optional) Determines whether the token is disabled.
  • labelTag (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
  • tags [string[]] - (Optional) A list of tags giving further guidance about the token.
  • dismissLabel (string) - (Optional) Adds an aria-label to the dismiss button.
  • iconName (string) - (Optional) Specifies the name of an icon to display in the token.
  • iconAlt (string) - (Optional) Specifies alternate text for a custom icon, for use with iconUrl.
  • iconUrl (string) - (Optional) URL of a custom icon.
  • iconSvg (ReactNode) - (Optional) Custom SVG icon. Equivalent to the svg slot of the icon component.

Type: ReadonlyArray<TokenGroupProps.Item>

Required: No

limit

Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.

Type: Number

Required: No

Events

onDismiss

Called when the user clicks on the dismiss button. The token won't be automatically removed. Make sure that you add a listener to this event to update your application state.

Detail type:

TokenGroupProps.DismissDetail {
  itemIndex: number
}

Cancelable: No

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.