Tag

Tagg, chip, statusindikator

Storybook

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

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

<TagGroup>
  <Tag>Tag med information</Tag>
</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>
      <Tag type='info'>Inte påbörjat</Tag>
    </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

Varianter

Tag finns i fem varianter.

<TagGroup>
  <Tag>Default</Tag>
  <Tag type='success'>Success</Tag>
  <Tag type='info'>Info</Tag>
  <Tag type='important'>Important</Tag>
  <Tag type='warning'>Warning</Tag>
</TagGroup>

Default

Success

Info

Important

Warning

Dismissable

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

<TagGroup>
  <Tag dismissable>Default</Tag>
</TagGroup>

Default

API

Name	Type	Default	Description
children *	ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
dismissable	boolean	-
type	FeedbackStatus	-
id	Key	-	An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.
textValue	string	-	A string representation of the item's contents, used for features like typeahead.
isDisabled	boolean	-	Whether the breadcrumbs are disabled.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<DisclosureRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.