Skip to Content
Dashflow Logo

Typography Component

A comprehensive guide to using the Typography component with examples, props, and best practices.

Overview

The Typography component provides a flexible text rendering system with multiple variants. It's designed for headings, paragraphs, and any text content that needs consistent styling and formatting.

Basic Usage

import { Typography } from '@dashflowx/core'


export default function TypographyExample() {
  return (
    <Typography variant="para">
      Sample typography text
    </Typography>
  )
}

Preview:

Sample typography text

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes
variantstring'para'Typography variant
disabledbooleanfalseWhether the typography is disabled
fullwidthbooleanfalseWhether the typography takes full width
lablestring'Typography'Label for the typography
requiredbooleanfalseWhether the field is required
prefixElementJSX.Element-Element to display before the typography
sufixElementJSX.Element-Element to display after the typography
sucessMsgstring-Success message to display
errorMsgstring-Error message to display

Variants

VariantDescriptionUse Case
oneLarge heading (4xl)Main page titles
twoLarge heading (3xl)Section titles
threeMedium heading (2xl)Subsection titles
fourSmall heading (xl)Card titles
fiveLarge text (lg)Important text
sixMedium text (base)Regular text
paraParagraph text (base)Body text

Examples

Basic Typography

import { Typography } from '@dashflowx/core'


export default function BasicTypography() {
  return (
    <Typography variant="para">
      Sample typography text
    </Typography>
  )
}

Preview:

Sample typography text

Custom Styled Typography

import { Typography } from '@dashflowx/core'


export default function CustomStyledTypography() {
  return (
    <Typography 
      variant="para"
      className="border border-blue-500 rounded-lg p-4"
    >
      Custom styled text
    </Typography>
  )
}

Preview:

Sample typography text

Typography with Label

import { Typography } from '@dashflowx/core'


export default function TypographyWithLabel() {
  return (
    <Typography 
      variant="para"
      lable="Text Content"
    >
      Labeled typography text
    </Typography>
  )
}

Preview:

Sample typography text

Heading Variants

import { Typography } from '@dashflowx/core'


export default function HeadingVariants() {
  return (
    <div>
      <Typography variant="one">Heading One</Typography>
      <Typography variant="two">Heading Two</Typography>
      <Typography variant="three">Heading Three</Typography>
      <Typography variant="four">Heading Four</Typography>
      <Typography variant="five">Heading Five</Typography>
      <Typography variant="six">Heading Six</Typography>
      <Typography variant="para">Paragraph Text</Typography>
    </div>
  )
}

Preview:

Sample typography text

Sample typography text

Sample typography text

Sample typography text

Sample typography text

Sample typography text

Sample typography text

Required Typography

import { Typography } from '@dashflowx/core'


export default function RequiredTypography() {
  return (
    <Typography 
      variant="para"
      lable="Required text"
      required={true}
    >
      This text is required
    </Typography>
  )
}

Preview:

Sample typography text

Disabled Typography

import { Typography } from '@dashflowx/core'


export default function DisabledTypography() {
  return (
    <Typography 
      variant="para"
      lable="Disabled text"
      disabled={true}
    >
      This text is disabled
    </Typography>
  )
}

Preview:

Sample typography text

Full Width Typography

import { Typography } from '@dashflowx/core'


export default function FullWidthTypography() {
  return (
    <Typography 
      variant="para"
      lable="Full width text"
      fullwidth={true}
    >
      This text takes full width
    </Typography>
  )
}

Preview:

Sample typography text

Common Use Cases

Page Title

const pageTitle = (
  <Typography variant="one">
    Welcome to Our Platform
  </Typography>
);

Section Heading

const sectionHeading = (
  <Typography variant="two">
    Features
  </Typography>
);

Card Title

const cardTitle = (
  <Typography variant="four">
    Product Name
  </Typography>
);

Body Text

const bodyText = (
  <Typography variant="para">
    This is the main content of your page.
  </Typography>
);

Important Text

const importantText = (
  <Typography variant="five">
    Important information
  </Typography>
);

Best Practices

1. Appropriate Variants

Use appropriate variants for different content types.

// ✅ Good - Appropriate variants
<Typography variant="one">Page Title</Typography>
<Typography variant="para">Body text</Typography>


// ❌ Avoid - Inappropriate variants
<Typography variant="one">Body text</Typography>
<Typography variant="para">Page Title</Typography>

2. Consistent Styling

Maintain consistent styling across typography elements.

// ✅ Good - Consistent styling
<Typography className="standard-typography-style" />


// ❌ Avoid - Inconsistent styling
<Typography className="random-styles" />

3. Accessible Text

Ensure typography is accessible to all users.

// ✅ Good - Accessible text
<Typography variant="para">
  Clear and readable text content
</Typography>


// ❌ Avoid - Not accessible
<Typography variant="para">
  Text with poor contrast
</Typography>

4. Appropriate Sizing

Use appropriate sizes for different contexts.

// ✅ Good - Appropriate sizing
<Typography variant="one">Main title</Typography>
<Typography variant="para">Body text</Typography>


// ❌ Avoid - Inappropriate sizing
<Typography variant="one">Small text</Typography>
<Typography variant="para">Large title</Typography>

5. Clear Labels

Use clear and descriptive labels when needed.

// ✅ Good - Clear labels
<Typography lable="Article content" />


// ❌ Avoid - Unclear labels
<Typography lable="Text" />

Customization

Custom Styling

You can customize the typography appearance using CSS classes:

<Typography 
  variant="para"
  className="border border-gray-300 rounded-lg p-4"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Typography className="bg-white text-gray-900" />


// Dark theme
<Typography className="bg-gray-900 text-white" />


// Brand theme
<Typography className="bg-blue-50 text-blue-900" />

Size Variations

Use different sizes for different emphasis levels:

// Small text
<Typography variant="six" className="text-sm" />


// Standard text
<Typography variant="para" className="text-base" />


// Large text
<Typography variant="five" className="text-lg" />

Advanced Usage

Dynamic Typography Content

Load typography content dynamically:

const [content, setContent] = useState('');


useEffect(() => {
  // Load content from API
  loadContent().then(setContent);
}, []);

Typography with Validation

Add validation to typography content:

const [hasError, setHasError] = useState(false);


<Typography 
  lable="Required content"
  required={true}
  errorMsg={hasError ? "Content is required" : ""}
/>

Typography with Success Message

Show success messages for typography content:

const [showSuccess, setShowSuccess] = useState(false);


<Typography 
  lable="Content saved"
  sucessMsg={showSuccess ? "Content saved successfully" : ""}
/>
  • H1-H6: For heading components
  • P: For paragraph components
  • Text: For text components
  • Label: For form labels
  • Button: For text buttons

API Reference

For the complete API reference and advanced usage patterns, see the Typography API documentation.

Edit this page on GitHub
previousPre