Flux

Text ​

The Text component renders inline or block text styled with the Flux type scale. It keeps typography consistent across your app, so you don't have to reach for custom CSS to set a size, weight, color, or tabular figures.

12,480Conversion funnelFrom first visit to purchase

TIP

By default Text renders a span and inherits the surrounding font size. Set the size prop to opt into the type scale, or use tag to render a different element such as a p.

Props

align?: "start" | "center" | "end"
The horizontal text alignment.

color?: FluxColor | "muted" | "prominent"
The color of the text. Use a FluxColor, or one of the semantic keywords muted and prominent.

size?: "small" | "medium" | "large" | "display"
The size of the text, mapped onto the Flux type scale.

tabular?: boolean
Renders digits with tabular figures, useful for aligning numbers in columns.

tag?: string
The HTML element that is rendered. Defaults to a span.

truncate?: boolean
Truncates the text to a single line with an ellipsis.

weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
The font weight of the text, as a standard numeric font-weight value.

Slots

default
The text content.

Examples ​

Basic

A simple piece of text, inheriting the surrounding font size.

The quick brown fox jumps over the lazy dog.

<template>
    <FluxText>The quick brown fox jumps over the lazy dog.</FluxText>
</template>

<script
    lang="ts"
    setup>
    import { FluxText } from '@flux-ui/components';
</script>

Sizes

The size prop maps onto the Flux type scale, from small captions up to display numbers.

Small — 13pxMedium — 15pxLarge — 18pxDisplay — 27px

<template>
    <FluxFlex direction="vertical">
        <FluxText size="small">Small — 13px</FluxText>
        <FluxText size="medium">Medium — 15px</FluxText>
        <FluxText size="large">Large — 18px</FluxText>
        <FluxText size="display">Display — 27px</FluxText>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxText } from '@flux-ui/components';
</script>

Weights

Adjust the emphasis of text with the weight prop.

Regular — 400Medium — 500Semibold — 600Bold — 700

<template>
    <FluxFlex direction="vertical">
        <FluxText :weight="400">Regular — 400</FluxText>
        <FluxText :weight="500">Medium — 500</FluxText>
        <FluxText :weight="600">Semibold — 600</FluxText>
        <FluxText :weight="700">Bold — 700</FluxText>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxText } from '@flux-ui/components';
</script>

Colors

Use a semantic keyword like muted, or any FluxColor.

Default foregroundMuted secondary textProminent textPrimaryDangerSuccess

<template>
    <FluxFlex direction="vertical">
        <FluxText>Default foreground</FluxText>
        <FluxText color="muted">Muted secondary text</FluxText>
        <FluxText color="prominent">Prominent text</FluxText>
        <FluxText color="primary">Primary</FluxText>
        <FluxText color="danger">Danger</FluxText>
        <FluxText color="success">Success</FluxText>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxText } from '@flux-ui/components';
</script>

Numbers

Combine tabular figures with a display size for metrics and KPIs.

8,41267.4%

<template>
    <FluxFlex
        align="baseline"
        :gap="9">
        <FluxText
            size="display"
            tabular
            :weight="600">8,412</FluxText>

        <FluxText
            color="muted"
            tabular>67.4%</FluxText>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxText } from '@flux-ui/components';
</script>