The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Text

Primitive typographic component
<Text>Hello world</Text>

Props
Link to this heading

<Text>

import { Text } from '@strum/react';
name
type
default
align
ConditionalStyle<Values<("left" | "right" | "center")[], { 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<{ normal: CSSVarFunction; [-0.02]: CSSVarFunction; [-0.015]: CSSVarFunction; [-0.01]: CSSVarFunction; 0.03: CSSVarFunction; }, { ...; }>>
-
lineHeight
ConditionalStyle<Values<{ none: CSSVarFunction; normal: CSSVarFunction; 1.25: CSSVarFunction; 1.375: CSSVarFunction; 1.5: CSSVarFunction; 1.625: CSSVarFunction; 2: CSSVarFunction; }, { ...; }>>
1.5
ref
Ref<HTMLElement>
-
size
"extraLarge" | "large" | "small" | "extraSmall" | "base"
-
transform
"capitalize" | "lowercase" | "uppercase"
-
transitionDuration
ConditionalStyle<Values<{ 300: CSSVarFunction; 600: CSSVarFunction; 150: CSSVarFunction; 3000: CSSVarFunction; }, { defaultClass: string; conditions: { ...; }; }>>
-
transitionProperty
"none" | "opacity" | "transform" | "all" | "colors" | "default" | "shadow"
-
transitionTimingFunction
"linear" | "in" | "out" | "inOut"
-
weight
ConditionalStyle<Values<{ normal: CSSVarFunction; light: CSSVarFunction; medium: CSSVarFunction; semiBold: CSSVarFunction; bold: CSSVarFunction; }, { ...; }>>
-
whiteSpace
"inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
-
wordBreak
"break-word"
-

Sizes
Link to this heading

<Text size="extraLarge">Extra large</Text>

<Text size="large">Large</Text>

<Text size="base">Base</Text>

<Text size="small">Small</Text>

<Text size="extraSmall">Extra small</Text>

Weights
Link to this heading

<Text weight="bold">Bold (700)</Text>

<Text weight="semiBold">Semi Bold (600)</Text>

<Text weight="medium">Medium (500)</Text>

<Text weight="normal">Normal (400)</Text>

<Text weight="light">Light (300)</Text>

Fonts
Link to this heading

<Text font="sans">Sans</Text>

<Text font="mono">Mono</Text>

Align
Link to this heading

<Text align="left">Left</Text>

<Text align="center">Center</Text>

<Text align="right">Right</Text>

Color
Link to this heading

<Text color="neutral12">Neutral 12</Text>

<Text color="neutral11">Neutral 11</Text>

<Text color="neutral10">Neutral 10</Text>

<Text color="accent11">Accent 11</Text>

<Text color="error11">Error 11</Text>

<Text color="warning11">Warning 11</Text>

<Text color="success11">Success 11</Text>

Ellipsis
Link to this heading

<Box width="12">

  <Text ellipsis>The quick brown fox jumped over the lazy dogs.</Text>

</Box>
Edit on GitHub