Typography
TwText
TwText renders text with the theme's neutral colours and shared typography scale, so light and dark mode stay readable without hard-coded gray classes.
Last updated
Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at
https://github.com/twblazor/twblazor/issues.
Theme
TwText reads the shared Typography section and the Colors.NeutralText palette from Theme.cs. Change those values once and every text component follows.
Typography.Size and Typography.Weight drive Size and Weight; Typography.Truncate drives Truncate. The Tone values map to NeutralText.Heading, Secondary, Muted and Subtle.
Basic usage
The element defaults to a
span, so it can sit inside a line of text. Set Element to a paragraph, heading or other semantic element when the text is a block of its own.
A paragraph rendered by TwText.
Supporting copy uses the theme's secondary neutral colour, including its dark-mode variant.
RAZOR
<TwText Element="LayoutElement.P" Size="TextSize.Lg" Weight="TextWeight.Semibold">A paragraph rendered by TwText.</TwText>
<TwText Element="LayoutElement.P" Tone="TextTone.Secondary" Class="mt-2">
Supporting copy uses the theme's secondary neutral colour, including its dark-mode variant.
</TwText>Tone and colour
Tone picks one of the neutral text tokens: Default, Secondary, Muted or Subtle. Set Color to use a semantic theme colour instead, or Tone="TextTone.Inherit" to keep the surrounding colour.
Default: the highest-contrast body and heading text.
Secondary: supporting copy one step quieter.
Muted: labels, captions and form hints.
Subtle: decorative or low-emphasis text.
Primary: a semantic theme colour.
Danger: a semantic theme colour for destructive text.
RAZOR
<TwFlex Direction="FlexDirection.Col" Gap="1">
<TwText Tone="TextTone.Default">Default: the highest-contrast body and heading text.</TwText>
<TwText Tone="TextTone.Secondary">Secondary: supporting copy one step quieter.</TwText>
<TwText Tone="TextTone.Muted">Muted: labels, captions and form hints.</TwText>
<TwText Tone="TextTone.Subtle">Subtle: decorative or low-emphasis text.</TwText>
<TwText Color="Color.Primary">Primary: a semantic theme colour.</TwText>
<TwText Color="Color.Danger">Danger: a semantic theme colour for destructive text.</TwText>
</TwFlex>Size and weight
Size and Weight resolve against the shared font scales in the theme. Leave either one unset to inherit the surrounding font size or weight.
5xl bold
3xl semibold
lg medium
base
sm secondary
xs muted
RAZOR
<TwFlex Direction="FlexDirection.Col" Gap="1">
<TwText Size="TextSize.Xl5" Weight="TextWeight.Bold">5xl bold</TwText>
<TwText Size="TextSize.Xl3" Weight="TextWeight.Semibold">3xl semibold</TwText>
<TwText Size="TextSize.Lg" Weight="TextWeight.Medium">lg medium</TwText>
<TwText Size="TextSize.Base">base</TwText>
<TwText Size="TextSize.Sm" Tone="TextTone.Secondary">sm secondary</TwText>
<TwText Size="TextSize.Xs" Tone="TextTone.Muted">xs muted</TwText>
</TwFlex>Semantic elements
Use the element that says what the text is. Headings appear in a screen reader's heading list,
Strong and Em carry emphasis, and Label names a form control.
Page heading
Section heading
A paragraph with strong importance and stress emphasis.
Fine print and side comments.RAZOR
<TwText Element="LayoutElement.H1" Size="TextSize.Xl3" Weight="TextWeight.Bold">Page heading</TwText>
<TwText Element="LayoutElement.H2" Size="TextSize.Xl" Weight="TextWeight.Semibold" Class="mt-3">Section heading</TwText>
<TwText Element="LayoutElement.P" Class="mt-3">
A paragraph with <TwText Element="LayoutElement.Strong" Tone="TextTone.Inherit">strong importance</TwText> and
<TwText Element="LayoutElement.Em" Tone="TextTone.Inherit"> stress emphasis</TwText>.
</TwText>
<TwText Element="LayoutElement.Small" Tone="TextTone.Muted" Class="mt-2 block">Fine print and side comments.</TwText>Truncation and custom classes
Set
Truncate to cut overflowing text with an ellipsis. Class is merged last, so a utility such as mt-4 or max-w-sm wins over the component's defaults.
A long line of text that no longer fits its container.
A custom class moved this line down.RAZOR
<div class="max-w-xs rounded-lg border border-gray-200 bg-white p-3 dark:border-white/10 dark:bg-white/5">
<TwText Truncate>A long line of text that no longer fits its container.</TwText>
</div>
<TwText Class="mt-3 block" Tone="TextTone.Muted">A custom class moved this line down.</TwText>