Renders a text component.

Examples

<.text>The quick brown fox jumps over the lazy dog.</.text>
<.text as="p" size="3" weight="medium" color="indigo">Custom text</.text>
<.text as="label" trim="both" truncate={true}>Truncated text</.text>

Props

• as - The element to render. Can be "span", "div", "label", or "p". Defaults to "span".
• size - Text size from 1 to 9. Controls font size, line height, and letter spacing. Can be a string or a responsive map.
• weight - Font weight: one of "light", "regular", "medium", or "bold".
• align - Text alignment: one of "left", "center", or "right".
• trim - Trim leading space: one of "normal", "start", "end", or "both".
• truncate - Whether to truncate text with ellipsis when it overflows.
• wrap - Text wrapping: one of "wrap", "nowrap", "pretty", or "balance".
• color - The text color. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
• high_contrast - Whether to increase color contrast with the background.
• as_child - Composes the component into its immediate child instead of rendering its own HTML element.
• class - Additional CSS classes to add to the element.
• style - Additional inline styles.
• rest - Additional HTML attributes to add to the element.

Attributes

• color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
• align (:string) - Text alignment: one of left, center, right. Must be one of "left", "center", or "right".
• trim (:string) - Trim leading space: one of normal, start, end, both. Must be one of "normal", "start", "end", or "both".
• wrap (:string) - Text wrapping: one of wrap, nowrap, pretty, balance. Must be one of "wrap", "nowrap", "pretty", or "balance".
• truncate (:boolean) - Whether to truncate text with ellipsis when it overflows.
• weight (:string) - Font weight: one of light, regular, medium, bold. Must be one of "light", "regular", "medium", or "bold".
• as_child (:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults to false.
• high_contrast (:boolean) - Whether to increase color contrast with the background.
• size (:any) - Text size from 1 to 9. Controls font size, line height, and letter spacing. Can be "1" or %{xs: "1", sm: "2", md: "3", lg: "4", xl: "5"}. Defaults to 1.
• as (:string) - The element to render. Can be 'span', 'div', 'label', or 'p'. Defaults to 'span'. Defaults to "span". Must be one of "span", "div", "label", or "p".
• class (:string) - Defaults to nil.
• style (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)