Text

Primitive typographic component

<Text>

import { Text } from '@strum/react';
name
type
default
align
ConditionalStyle<Values<("center" | "left" | "right")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
"label" | "span" | "code" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "p"
div
color
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
neutral12
ellipsis
boolean
-
font
"mono" | "sans"
sans
letterSpacing
ConditionalStyle<Values<MapLeafNodes<{ '-0.02': string; '-0.015': string; '-0.01': string; normal: string; '0.03': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
lineHeight
ConditionalStyle<Values<MapLeafNodes<{ normal: string; none: string; '1.25': string; '1.375': string; '1.5': string; '1.625': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
1.5
ref
Ref<HTMLElement>
-
size
"extraLarge" | "large" | "small" | "extraSmall" | "base"
-
transform
"capitalize" | "lowercase" | "uppercase"
-
transitionDuration
ConditionalStyle<Values<MapLeafNodes<{ '150': string; '300': string; '600': string; '3000': string; }, CSSVarFunction>, { defaultClass: string; conditions: { base: string; }; }>>
-
transitionProperty
"opacity" | "transform" | "all" | "none" | "colors" | "default" | "shadow"
-
transitionTimingFunction
"linear" | "in" | "out" | "inOut"
-
weight
ConditionalStyle<Values<MapLeafNodes<{ light: string; normal: string; medium: string; semiBold: string; bold: string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
whiteSpace
"inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
-
wordBreak
"break-word"
-