Text

Brödtext, p, span, i, em, strong

Storybook

React Aria

Textelement med fördefinerad stil

<Text>Jag är ett vanligt span-element som standard</Text>

Jag är ett vanligt span-element som standard

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Text } from '@midas-ds/components'

Varianter

Stil

Använd egenskapen variant för att justera textens utseende

<Text variant='body-01'>Jag är ett span-element av varianten 'body-01'</Text>

Jag är ett span-element av varianten 'body-01'

Extern

Använd egenskapen isExpressive för ett externt och luftigare utseende.

<Text
  variant='body-02'
  isExpressive
>
  Jag är ett externt span-element
</Text>

Jag är ett externt span-element

Val av element

Egenskapen elementType kan användas för att ändra textens DOM-element.

<Text elementType='em'>Jag är kursiv och viktig</Text>

Jag är kursiv och viktig

Slot

I Midas används Text internt i formulärkomponenter för att skriva ut en hjälptext slot='description'.

<Label htmlFor="name" variant="label-02">Fullständigt namn</Label>
<Text slot="description">Både för och efternamn</Text>
<input id="name" />

Fullständigt namnBåde för och efternamn

API

Text

Name	Type	Default	Description
variant	"body-01" | "body-02"	body-02	The visual variant of the component
isExpressive	boolean	false	Use the external/expressive look
elementType	string	span