Tag

Tagg, chip, statusindikator

Storybook

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

<TagGroup>
  <Tag>Tag med information</Tag>
</TagGroup>

Tag med information

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

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	"default" | "success" | "warning" | "info" | "important"	default
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.
className	string | ((values: TagRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: TagRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
href	string	-	A URL to link to. See MDN.
hrefLang	string	-	Hints at the human language of the linked URL. SeeMDN.
target	HTMLAttributeAnchorTarget	-	The target window for the link. See MDN.
rel	string	-	The relationship between the linked resource and the current page. See MDN.
download	string | boolean	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping	string	-	A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy	HTMLAttributeReferrerPolicy	-	How much of the referrer to send when following the link. See MDN.
routerOptions	never	-	Options for the configured client side router.