Tag

Tagg, chip, statusindikator

Storybook

Komponent för att visa beskrivande etiketter som kan användas för att kategorisera information.

import { Tag, TagGroup, TagList } from '@midas-ds/components'

<TagGroup aria-label='Taggar'>
  <TagList>
    <Tag>Tag med information</Tag>
  </TagList>
</TagGroup>

Tag med information

Användning

Tag används som en del av Select om showTags är aktiverat men kan också användas fristående eller inuti andra komponenter.

<Card horizontal>
  <CardContent>
    <CardTitle>Köp frukt</CardTitle>
    <Text>Vi behöver köpa frukt till fika</Text>
    <TagGroup aria-label='Taggar'>
      <TagList>
        <Tag color='sky'>Inte påbörjat</Tag>
      </TagList>
    </TagGroup>
  </CardContent>
  <CardActions>
    <Button variant='tertiary'>Utför uppgift</Button>
  </CardActions>
</Card>

Köp frukt

Vi behöver köpa frukt till fika

Inte påbörjat

Färger

Tag finns i nio färger.

<TagGroup aria-label='Färger'>
  <TagList>
    <Tag>Default</Tag>
    <Tag color='sky'>Sky</Tag>
    <Tag color='mint'>Mint</Tag>
    <Tag color='cream'>Cream</Tag>
    <Tag color='teal'>Teal</Tag>
    <Tag color='lagoon'>Lagoon</Tag>
    <Tag color='lavender'>Lavender</Tag>
    <Tag color='peach'>Peach</Tag>
    <Tag color='pippin'>Pippin</Tag>
  </TagList>
</TagGroup>

Default

Sky

Mint

Cream

Teal

Lagoon

Lavender

Peach

Pippin

Dismissable

Det går att göra det möjligt för användaren att stänga tag via isDismissable.

<TagGroup aria-label='Taggar'>
  <TagList>
    <Tag isDismissable>Default</Tag>
  </TagList>
</TagGroup>

Default

Ikoner

Ikoner kan användas inuti en tag.

<TagGroup aria-label='Taggar'>
  <TagList>
    <Tag>
      <ScooterIcon /> Scooters
    </Tag>
  </TagList>
</TagGroup>

Scooters

Statiskt och dynamisk innehåll

TagList använder React arias API för Collections och kan användas dynamiskt.

import { Tag, TagGroup, TagList, type TagProps } from '@midas-ds/components'

const DynamicExample = () => {
  const items: { id: TagProps['color']; name: string }[] = [
    { id: 'sky', name: 'Sky' },
    { id: 'mint', name: 'Mint' },
    { id: 'cream', name: 'Cream' },
    { id: 'teal', name: 'Teal' },
    { id: 'lagoon', name: 'Lagoon' },
    { id: 'lavender', name: 'Lavender' },
    { id: 'peach', name: 'Peach' },
    { id: 'pippin', name: 'Pippin' },
  ]

  return (
    <TagGroup aria-label='Taggar'>
      <TagList items={items}>
        {item => (
          <Tag
            id={item.id}
            color={item.id}
          >
            {item.name}
          </Tag>
        )}
      </TagList>
    </TagGroup>
  )
}

Sky

Mint

Cream

Teal

Lagoon

Lavender

Peach

Pippin

API

Tag

Name	Type	Default	Description
color	"sky" | "mint" | "cream" | "teal" | "lagoon" | "lavender" | "peach" | "pippin" | "blue" | "green" | "lagoonblue" | "orange" | "purple" | "red" | "yellow"	-	Sets the background and border color of the tag
dismissable	boolean	false	Add a button for dismissing the tab @deprecated since v17.0.0 please use isDismissable instead
isDismissable	boolean	-	Add a button for dismissing the tab
type	FeedbackStatus	-	@deprecated since v17.0.0 please use the prop color instead
className	ClassNameOrFunction<TagRenderProps>	'react-aria-Tag'	The CSS className for the element. A function may be provided to compute the class based on component state.
id	Key	-	A unique id for the tag.
textValue	string	-	A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.
isDisabled	boolean	-	Whether the tag is disabled.
children	ChildrenOrFunction<TagRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<TagRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TagRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

TagGroup

Name	Type	Default	Description
className	string	'react-aria-TagGroup'	The CSS className for the element.
escapeKeyBehavior	"clearSelection" | "none"	'clearSelection'	Whether pressing the escape key should clear selection in the TagGroup or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
selectionBehavior	SelectionBehavior	-	How multiple selection should behave in the collection.
shouldSelectOnPressUp	boolean	-	Whether selection should occur on press up instead of press down.
disabledKeys	Iterable<Key>	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
selectionMode	SelectionMode	-	The type of selection that is allowed in the collection.
disallowEmptySelection	boolean	-	Whether the collection allows empty selection.
selectedKeys	Iterable<Key> | "all"	-	The currently selected keys in the collection (controlled).
defaultSelectedKeys	Iterable<Key> | "all"	-	The initial selected keys in the collection (uncontrolled).
children	ReactNode	-	The children of the component.
style	CSSProperties	-	The inline style for the element.
slot	string | null	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
render	DOMRenderFunction<"div", undefined>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

TagList

Name	Type	Default	Description
className	ClassNameOrFunction<TagListRenderProps>	'react-aria-TagList'	The CSS className for the element. A function may be provided to compute the class based on component state.
renderEmptyState	((props: TagListRenderProps) => ReactNode)	-	Provides content to display when there are no items in the tag list.
children	ReactNode | ((item: T) => ReactNode)	-	The contents of the collection.
items	Iterable<T>	-	Item objects in the collection.
dependencies	readonly any[]	-	Values that should invalidate the item cache when using dynamic collections.
style	StyleOrFunction<TagListRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TagListRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.