ComponentsText

Text

Display body or any other form of text. By default it outputs the <p> paragraph element.

#

Documentation

#

Usage

Extra small text

Small text

Default text

Large text

Extra large text

import { Flex, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex>
      <Text fontSize="xs">Extra small text</Text>
      <Text fontSize="sm">Small text</Text>
      <Text fontSize="md">Default text</Text>
      <Text fontSize="lg">Large text</Text>
      <Text fontSize="xl">Extra large text</Text>
    </Flex>
  );
}

#

Formatting

This is a paragraph showcasing bold text, italic emphasis, computer code, and even hotkey combination ⌘K within text.

import { Code, Kbd, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Text fontSize="lg">
      This is a paragraph showcasing <strong>bold text</strong>,{" "}
      <em>italic emphasis</em>, computer <Code>code</Code>, and even hotkey
      combination <Kbd keys="command">K</Kbd> within text.
    </Text>
  );
}

#

Truncate

Use the truncate prop to truncate the text and add an ellipsis at the end.

The quick brown fox jumps over the lazy dog.

import { Box, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box w="224">
      <Text truncate>The quick brown fox jumps over the lazy dog.</Text>
    </Box>
  );
}

#

Line clamp

Use the lineClamp prop to truncate the text at specific number of lines.

Lorem Ipsum is a placeholder text commonly used in the design and printing industries. Despite its widespread use, the origins of Lorem Ipsum are somewhat mysterious. Several theories exist about who may have invented the text, but no one knows.

import type { ComponentPropsWithRef } from "react";
 
import { Text } from "@optiaxiom/react";
 
export function App({
  lineClamp = "2",
}: Pick<ComponentPropsWithRef<typeof Text>, "lineClamp">) {
  return (
    <Text lineClamp={lineClamp}>
      Lorem Ipsum is a placeholder text commonly used in the design and printing
      industries. Despite its widespread use, the origins of Lorem Ipsum are
      somewhat mysterious. Several theories exist about who may have invented
      the text, but no one knows.
    </Text>
  );
}

#

Composition

Text component uses the Radix Composition approach and accepts an asChild prop. By default it renders a <p> element but when asChild is enabled it will forward all of its own props to its child and only render the child element instead.

I am a span
import { Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Text asChild fontSize="sm" textTransform="uppercase">
      <span>I am a span</span>
    </Text>
  );
}

#

Related

Heading

Heading component is used to display page title and section headings. The default root element is h1 which can be configured using the level prop.

#

Props

#

Text

Supports all Box props in addition to its own. Renders a <p> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

lineClamp

Truncate the text at specific number of lines.

"1" | "2" | "3" | "4"

truncate

Whether to truncate the text and add an ellipsis at the end.

false | true

#

Changelog

#

0.1.0

  • Added component
TabsTextarea