A lead paragraph uses md, a little larger than body text.
Body text uses base, which covers nine tenths of the words in an interface.
Supporting notes use sm and a secondary tone.
<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Text size="md">A lead paragraph uses md, a little larger than body text.</Text>
<Text>Body text uses base, which covers nine tenths of the words in an interface.</Text>
<Text size="sm" tone="muted">Supporting notes use sm and a secondary tone.</Text>
</Stack>
</template>
Usage
import { Text } from '@hina-ui/vue'
Renders a p at body size in a regular weight. Most of the time no property is needed at all.
Renders a paragraph at body size in a regular weight by default.
<script setup lang="ts">
import { Text } from '@hina-ui/vue'
</script>
<template>
<Text class="max-w-lg">Renders a paragraph at body size in a regular weight by default.</Text>
</template>
Examples
Sizes
Seven steps, from 13 pixels to 30. base is body text, md suits a lead paragraph, sm is for supporting interface text, xs for tiny labels such as badges, and lg and above usually belong to Heading.
2xl thirty pixels
xl twenty-four pixels
lg twenty pixels
md eighteen pixels
base sixteen pixels
sm fourteen pixels
xs thirteen pixels
<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Text size="2xl">2xl thirty pixels</Text>
<Text size="xl">xl twenty-four pixels</Text>
<Text size="lg">lg twenty pixels</Text>
<Text size="md">md eighteen pixels</Text>
<Text size="base">base sixteen pixels</Text>
<Text size="sm">sm fourteen pixels</Text>
<Text size="xs">xs thirteen pixels</Text>
</Stack>
</template>
Inherited size
size="inherit" inherits the parent’s font size and line height, following changes to the parent’s typography. Pair it with as="span" for inline text; changing as alone does not change the size.
Colour and weight remain controlled by tone and weight. Omitting size still uses base.
sm parent text, inherited size and line height .
base parent text, inherited size and line height .
xl parent text, inherited size and line height .
<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Text size="sm">
sm parent text,
<Text as="span" size="inherit" tone="accent">inherited size and line height</Text>
.
</Text>
<Text size="base">
base parent text,
<Text as="span" size="inherit" tone="accent">inherited size and line height</Text>
.
</Text>
<Text size="xl">
xl parent text,
<Text as="span" size="inherit" tone="accent">inherited size and line height</Text>
.
</Text>
</Stack>
</template>
Tones
default is body colour, muted and faint step down from it, disabled marks unavailable content, and the remaining four carry meaning.
default, body text
muted, secondary notes
faint, the lightest annotation
disabled, unavailable
accent, emphasis
success
warning, needs attention
danger, an error
info, supplementary
<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg" gap="xs">
<Text tone="default">default, body text</Text>
<Text tone="muted">muted, secondary notes</Text>
<Text tone="faint">faint, the lightest annotation</Text>
<Text tone="disabled">disabled, unavailable</Text>
<Text tone="accent">accent, emphasis</Text>
<Text tone="success">success</Text>
<Text tone="warning">warning, needs attention</Text>
<Text tone="danger">danger, an error</Text>
<Text tone="info">info, supplementary</Text>
</Stack>
</template>
Weight
Three weights. Body text is regular, table headers and labels are medium, and semibold is for emphasis.
Regular weight, the body default
Medium weight, for headers and labels
Semibold weight, for emphasis
<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg" gap="xs">
<Text weight="normal">Regular weight, the body default</Text>
<Text weight="medium">Medium weight, for headers and labels</Text>
<Text weight="semibold">Semibold weight, for emphasis</Text>
</Stack>
</template>
Truncation
With truncate, text wider than its container ends in an ellipsis and never wraps.
A very long line of text truncated at the container edge with an ellipsis
<script setup lang="ts">
import { Text } from '@hina-ui/vue'
</script>
<template>
<Text truncate class="max-w-xs">
A very long line of text truncated at the container edge with an ellipsis
</Text>
</template>
Rendered tag
as chooses the tag to render. Inside a sentence use span, so a paragraph does not break the inline flow.
Renders a p element by default.
Setting as to span keeps it inline.<script setup lang="ts">
import { Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Text>Renders a p element by default.</Text>
<Text as="span" tone="muted">Setting as to span keeps it inline.</Text>
<Text as="div" size="sm">It can also be a div.</Text>
</Stack>
</template>
Accessibility
- Tones only change colour, never meaning. Information carried by colour alone should also be stated in words.
faintanddisabledhave low contrast and are not meant for text people need to read.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit' | 'base' | Font size |
tone | 'default' | 'muted' | 'faint' | 'disabled' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'default' | Tone |
weight | 'normal' | 'medium' | 'semibold' | 'normal' | Font weight |
truncate | boolean | false | Truncate to one line with an ellipsis |
as | string | Component | 'p' | Element or component to render |
asChild | boolean | false | Render nothing, merging into the single child |
class | string | — | Classes appended to the root |
Slots
| Slot | Description |
|---|---|
default | The text content |