For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/typography.md.
Leaf UI
  • English

      • Typography

      Organize headings, body text and links.

      Basic usage

      Project notes

      Organize headings, body text and links with a consistent reading rhythm.

      Updated today · Read the API
      basic.tsx
      import { Link, Paragraph, Text, Title, Typography } from '@ifhover/leaf-ui';

export function TypographyBasic() {
  return (
    <Typography>
      <Title level={3}>{'Project notes'}</Title>
      <Paragraph>
        {'Organize headings, body text and links with a consistent reading rhythm.'}
      </Paragraph>
      <Text tone="muted">{'Updated today'}</Text>
      {' · '}
      <Link href="#typography-api">{'Read the API'}</Link>
    </Typography>
  );
}

      Copy and edit

      Leaf workspace

      A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.

      basic.tsx
      import { Paragraph, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TypographyActions() {
  const [text, setText] = useState('Leaf workspace');
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Text copyable editable={{ onChange: setText }}>
        {text}
      </Text>
      <Paragraph ellipsis={{ rows: 2, expandable: true }} style={{ maxWidth: 320 }}>
        {'A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.'}
      </Paragraph>
    </div>
  );
}

      Typography API

      PropertyTypeDefaultDescription
      compactboolean—Use tighter paragraph spacing.

      Text API

      PropertyTypeDefaultDescription
      tone'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger''default'Semantic text tone.
      strongboolean—Use bold text.
      italicboolean—Use italic text.
      underlineboolean—Show an underline.
      codeboolean—Display as inline code.
      markboolean—Highlight text.
      ellipsisboolean | { rows?: number; expandable?: boolean }—Truncate one or more lines, optionally with an expand action.
      copyableboolean | { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }—Provide a copy action with optional content and callbacks.
      editable{ onChange: (text: string) => void; text?: string }—Provide editing; update the text after onChange.

      Paragraph API

      PropertyTypeDefaultDescription
      tone'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger''default'Semantic text tone.
      strongboolean—Use bold text.
      italicboolean—Use italic text.
      underlineboolean—Show an underline.
      codeboolean—Display as inline code.
      markboolean—Highlight text.
      ellipsisboolean | { rows?: number; expandable?: boolean }—Truncate one or more lines, optionally with an expand action.
      copyableboolean | { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }—Provide a copy action with optional content and callbacks.
      editable{ onChange: (text: string) => void; text?: string }—Provide editing; update the text after onChange.

      Title API

      PropertyTypeDefaultDescription
      level1 | 2 | 3 | 4 | 5 | 62Heading level, rendering h1–h6.
      PropertyTypeDefaultDescription
      disabledboolean—Disable interaction.
      underlinebooleantrueShow an underline.
      externalboolean—Open in a new tab with a safe rel attribute.
      iconReactNode—Icon content.

      Types and interaction

      Import the props and data types when creating reusable configuration.

      import type { TypographyProps, TextProps, ParagraphProps, TitleProps, LinkProps } from '@ifhover/leaf-ui';

      Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.