Text

Die Text-Component sorgt für eine konsistente Formatierung und Strukturierung von Text.

Das ist ein Text

import { Text } from "@mittwald/flow-react-components";

<Text>Das ist ein Text</Text>

Best Practices

Formuliere Texte prägnant, verständlich und hilfreich. Orientiere dich am Sprach-Guide‍.
Halte die Benutzeroberfläche auch ohne Text verständlich. Text wird häufig nur unaufmerksam wahrgenommen.
Begrenze die Zeilenlänge auf höchstens 75 Zeichen. Längere Zeilen erschweren die Lesbarkeit.
Kennzeichne Absätze über elementType korrekt als .

Color

Zusätzlich zur Standard-Color kann Text in Light und Dark dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt Color‍.

Das ist ein Text

Size

Neben der Default-Schriftgröße unterstützt Text auch die Size Small. Nutze das -Tag, um sie zu verwenden.

Das ist ein Text in small

Mit elementType

Verwende die elementType-Property, um festzulegen, welches HTML-Element die Text-Component rendern soll. Standardmäßig wird ein  erzeugt. Für Fließtexte, die als eigenständige Absätze erkennbar sein sollen, verwende stattdessen ein -Element.

Das ist ein Absatz

HTML-Elemente und Formatierungen

Die Text-Component unterstützt alle gängigen Formatierungen und Elemente wie , , <ul> und <ol>.

Item 1
Item 2

Dies ist ein Beispiel für verschiedene HTML-Formatierungen.

No Ligatures

Verwende die noLigatures-Property, um typografische Ligaturen in der Text-Component zu deaktivieren. Dadurch werden Zeichen unverändert und einzeln dargestellt.

4x5=20vs.Short-ID: p-ah4x5fs

Kombiniere mit ...

Combine

Benutze die Combine-Component‍, um neben dem Text z. B. ein Icon, einen CopyButton oder ein ContextualHelp zu platzieren.

mail.agenturserver.de

Properties

Property	Type	Default	Description
`align`	`"start" \| "end" \| "center"`	"start"	The alignment of the text.
`children`	`ReactNode`	-
`color`	`"default" \| "dark" \| "light" \| "dark-static" \| "light-static"`	"default"	The color of the text.
`elementType`	`"div" \| "span" \| "p" \| ExoticComponent<{}>`	-	The HTML element or React component rendered as the elements root.
`emulateBoldWidth`	`boolean`	-	Whether the elements width should match the width it would have with bold text.
`noLigatures`	`boolean`	-	Disables standard and contextual ligatures for predictable, literal text rendering.
`render`	`DOMRenderFunction<"div", TooltipRenderProps>`	-	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.
`whiteSpace`	`WhiteSpace`	-	The white-space property of the text.
`wordBreak`	`WordBreak`	-	The word-break property of the text.
`wrap`	`"wrap" \| "balance" \| "pretty"`	-	The text-wrap property of the text.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components

Integrations