Text

import { Text } from '@raystack/apsara';

function Example() {
  return <Text>This is some text</Text>;
}

import { Text } from '@raystack/apsara';

function TextVariants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text variant="primary">Primary text</Text>
      <Text variant="secondary">Secondary text</Text>
      <Text variant="tertiary">Tertiary text</Text>
      <Text variant="emphasis">Emphasis text</Text>
      <Text variant="accent">Accent text</Text>
      <Text variant="attention">Attention text</Text>
      <Text variant="danger">Danger text</Text>
      <Text variant="success">Success text</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function TextSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text size="micro">Micro text</Text>
      <Text size="mini">Mini text</Text>
      <Text size="small">Small text (default)</Text>
      <Text size="regular">Regular text</Text>
      <Text size="large">Large text</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function TextWeights() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text weight="regular">Regular weight (default)</Text>
      <Text weight="medium">Medium weight</Text>
      <Text weight="bold">Bold weight</Text>
      <Text weight={700}>Numeric weight (700)</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function TextTransforms() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text transform="capitalize">capitalize this text</Text>
      <Text transform="uppercase">uppercase this text</Text>
      <Text transform="lowercase">LOWERCASE THIS TEXT</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function TextAlignment() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text align="start" as="div">Start aligned</Text>
      <Text align="center" as="div">Center aligned</Text>
      <Text align="end" as="div">End aligned</Text>
      <Text align="justify" as="div">Justified text that spans multiple lines to show the justification effect.</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function ClampedText() {
  return (
    <div style={{ maxWidth: '300px' }}>
      <Text lineClamp={2}>
        This is a long piece of text that will be clamped to two lines. 
        Any content beyond two lines will be hidden and replaced with an ellipsis.
      </Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function StyledText() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text underline>Underlined text</Text>
      <Text strikeThrough>Strikethrough text</Text>
      <Text italic>Italic text</Text>
      <Text weight="bold" underline>Bold and underlined</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function DifferentElements() {
  return (
    <div>
      <Text as="span">Inline span (default)</Text>
      <Text as="div">Block div</Text>
      <Text as="p">Paragraph element</Text>
      <Text as="label" htmlFor="input-id">Label element</Text>
    </div>
  );
}

import { Text } from '@raystack/apsara';

function StatusMessages() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text variant="success" size="small">
        ✓ Your changes have been saved
      </Text>
      <Text variant="danger" size="small">
        ✗ An error occurred while processing your request
      </Text>
      <Text variant="attention" size="small">
        ⚠ This action cannot be undone
      </Text>
    </div>
  );
}

import { Text, Amount } from '@raystack/apsara';

function ComposedText() {
  return (
    <Text size="regular" variant="emphasis">
      Total amount: <Amount value={1299} currency="USD" />
    </Text>
  );
}