Text

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

Storybook

React Aria

Textelement med fördefinierad stil

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

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

Jag är ett vanligt span-element som standard

Varianter

Storlek

Använd egenskapen size för att justera textens storlek

<Text size='small'>Jag är ett span-element med liten text</Text>

Jag är ett span-element med liten text

Extern

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

<Text 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'. När slot='description' används får texten automatiskt description-stil istället för body-stil.

<Label htmlFor="name">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

Du kan även kombinera slot='description' med size='small' för liten description-text:

<Text slot="description" size="small">Liten hjälptext</Text>

Liten hjälptext

API

Text

Name	Type	Default	Description
size	"small"	-	The size of the text. When omitted, uses the default size. The style type (body vs description) is derived from the slot prop.
variant	TextVariant	-	@deprecated Use size prop instead. Only body-01 and body-02 are supported for backwards compatibility.
isExpressive	boolean	false	Use the external/expressive look
elementType	string	span