Text

Text component is used to display body or any other form of text. The default root element is p which can be configured using the asChild prop.

#
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="192">
      <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.

Line clamp

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

#
`asChild` prop

Text component uses the @radix-ui Composition approach and accepts an asChild prop. By default it renders a p element but when asChild is set to true it will instead pass all props to its child element.

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>
  );
}

#
Props

#
`Text`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
lineClamp	`"1" \| "2" \| "4" \| "3"`
truncate	`false \| true`

#
Changelog

#
0.1.0

Added component

Kbd Button