Components

Text

Body, label and button typography.

Import

import { Text } from '@dr-max/ui/text'

Usage

Like Heading, the rendered element (as) is independent of the visual style (variant):

Free delivery on orders over 999 Kč.

<script setup lang="ts">
import { Text } from '@dr-max/ui/text'
</script>

<template>
  <Text variant="body-regular-lg">Free delivery on orders over 999 Kč.</Text>
</template>

Variants

Variants cover three families — body-* for paragraphs, label-* for form labels and UI captions, and button-* for action text:

Body regular lg

Body semibold md

Label medium md

Label regular sm

Button semibold md

<template>
  <Text variant="body-regular-lg">Body regular lg</Text>
  <Text variant="body-semibold-md">Body semibold md</Text>
  <Text variant="label-medium-md">Label medium md</Text>
  <Text variant="label-regular-sm">Label regular sm</Text>
  <Text variant="button-semibold-md">Button semibold md</Text>
</template>

Playground

Free delivery on orders over 999 Kč.

slot

variant

<script setup lang="ts">
import { Text } from '@dr-max/ui/text'
</script>

<template>
  <Text variant="body-regular-lg" as="p">Free delivery on orders over 999 Kč.</Text>
</template>