Set isVisuallyHidden to hide the text while keeping it available to assistive technology. Text
keeps its React Aria Text root. There is no extra wrapper. Use
VisuallyHidden directly when the content is not typography
text, or when it must reveal on focus.
Text renders React Aria's Text component, which uses a span by default. Set elementType to
choose a semantic element without changing the type treatment. Text trims Capsize space on known
block elements such as p, div, headings, and blockquote, and skips it for inline or unknown
element types. Use renderRoot instead of elementType when a callback must own the root element.
The two props are mutually exclusive. A TextrenderRoot callback must return a <span>. Use
elementType for a different semantic tag. Heading supplies its resolved heading tag to its
renderRoot callback.
<Text elementType="p">A paragraph of supporting copy.</Text><Text elementType="label">Email address</Text>
import { Text } from '@luke-ui/react/text';export default () => { return <Text typography="lead">Lead text sits at a larger size than body text.</Text>;};
Set fontWeight only when you need to override the style's weight. Themes expose body, label,
heading, and emphasis roles for that purpose.
Use a larger style such as display or heading1 for prominent content that is not a heading, such
as a large status value.
Omit color to inherit the surrounding colour. Set color to primary, secondary, or a semantic
role: neutral, accent, info, success, warning, or danger. Each value reads the nearest
Luke UI background, such as a Box backgroundColor. On a standard surface or a subtle fill, a role
keeps its hue. On a solid fill, every role reads as that fill's primary colour, because the theme
guarantees contrast only for that fill's own foreground. Typography components such as Strong keep
the colour around them.
secondary guarantees readable contrast, not visible de-emphasis. On a solid fill it can match
primary. Typography props such as typography and shouldInheritFont never change the colour.
Read Colour for the backgrounds Luke UI recognises.
Block text trims space above capitals and below the baseline by default. That makes vertical spacing
more predictable in cards and other bounded layouts. Inline text skips trim so its pseudo-elements
cannot interrupt the surrounding line. Set shouldDisableTrim explicitly when you need to override
the element-type inference.
Use lineClamp to constrain text to one line or up to five lines. Text truncates overflow with an
ellipsis. It disables trimming automatically when you set lineClamp.
Short lines are easier to scan than long ones, which is why well-set text rarely stretches edge to edge on a wide screen, no matter how much room is available.
Short lines are easier to scan than long ones, which is why well-set text rarely stretches edge to edge on a wide screen, no matter how much room is available.
import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';export default () => { return ( <Stack gap="space.16"> <Text elementType="div" lineClamp> Short lines are easier to scan than long ones, which is why well-set text rarely stretches edge to edge on a wide screen, no matter how much room is available. </Text> <Text elementType="div" lineClamp={2}> Short lines are easier to scan than long ones, which is why well-set text rarely stretches edge to edge on a wide screen, no matter how much room is available. </Text> </Stack> );};
Use textTransform and textDecoration when the content calls for them. These props affect the
rendered text only, so avoid using uppercase styling as a substitute for a clear label.
Sets text colour from the nearest Luke UI background. On a solid background, every semantic
role reads as that background's primary colour. Omit it to inherit the surrounding colour.