Text

Text in the type scale: one scale, used the same way everywhere.

micro: Route each request to the model you choosecaption: Route each request to the model you choosesmall: Route each request to the model you choosebody: Route each request to the model you choosebody-lg: Route each request to the model you choosetitle-sm: Route each request to the model you choosetitle: Route each request to the model you choosetitle-lg: Route each request to the model you choosedisplay: Route each request to the model you choose$1,284.20

<div className="flex flex-col gap-8">
      {(Object.keys(KAESO_TEXT_VARIANTS.variant) as TextVariant[]).map((v) => (
        <Text key={v} variant={v}>
          {v === "metric" ? "$1,284.20" : `${v}: Route each request to the model you choose`}
        </Text>
      ))}
    </div>

import { Text } from "@logicplanes/kaeso-ui";

Props

as
ElementType
The element or component to render as, such as section or ul.
children
ReactNode
The text.
mono
boolean
Geist Mono, for keys, ids, model ids and code.
tabular
boolean
Tabular numerals. On by default for metric.
tone
"success" | "warning" | "danger" | "info" | "inherit" | "secondary" | "default" | "tertiary" = default
The text color role; status tones go next to words that say the same.
truncate
boolean
One line with an ellipsis; the full text appears in a tooltip when it is cut.
variant
"title" | "display" | "title-sm" | "title-lg" | "body" | "caption" | "small" | "micro" | "body-lg" | "metric" = body
The type style, from micro to display.
weight
"medium" | "regular" | "semibold"
The weight, when it differs from the type style's.