Text

Body text with size, tone and weight options. Size prop: xs, sm, md, lg, xl.

Import

Vue

import { UiText } from '@ziyarago/ui/vue'

Sizes

Text in this size

Vue

<UiText size="xs">
  Text in this size
</UiText>

<UiText size="sm">
  Text in this size
</UiText>

<UiText size="md">
  Text in this size
</UiText>

<UiText size="lg">
  Text in this size
</UiText>

<UiText size="xl">
  Text in this size
</UiText>

Sizes

Extra small text

Small text

Medium text

Large text

Vue

<UiText size="xs">
  Extra small text
</UiText>

<UiText size="sm">
  Small text
</UiText>

<UiText size="md">
  Medium text
</UiText>

<UiText size="lg">
  Large text
</UiText>

Tones

Default tone

Muted tone

Subtle tone

Brand tone

Bold text

Vue

<UiText>
  Default tone
</UiText>

<UiText tone="muted">
  Muted tone
</UiText>

<UiText tone="subtle">
  Subtle tone
</UiText>

<UiText tone="brand">
  Brand tone
</UiText>

<UiText bold>
  Bold text
</UiText>

Truncate

Makkah Clock Royal Tower, 5 star hotel with direct Haram view and breakfast included

Vue

<UiText truncate>
  Makkah Clock Royal Tower, 5 star hotel with direct Haram view and breakfast included
</UiText>

API reference

Body text paragraph (or any inline/block tag via as) with size, tone and truncation.

Props

PropType and valuesDefaultDescription

asstring'p'HTML tag to render, for example span, div, label.

sizexssmmdlgxl'md'Font size: xs 12px, sm 14px, md 16px, lg 18px, xl 20px.

tonemutedsubtlebrand—Text color. Omit for the primary text color.

boldbooleanfalseSemi-bold weight.

truncatebooleanfalseSingle line with ellipsis overflow.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultText content.

Notes

truncate needs a parent with a constrained width (for example min-width: 0 in a flex row).