Typography
The Typography component provides consistent text styling across the app with 13 semantic variants.
Import
import { Typography } from 'papillon-ui';
Basic Usage
<Typography variant="h1">Large Heading</Typography>
<Typography variant="body1">Regular body text</Typography>
<Typography variant="caption" color="secondary">Secondary text</Typography>
Props
Text style variant. Options: h0, h1, h2, h3, h4, h5, h6, title, header, navigation, body1, body2, button, caption
color
Color | string
default:"text"
Text color. Options: primary, text, secondary, light, danger, or any hex color
Text alignment: left, center, right, justify
Font weight override: regular, medium, semibold, bold
Shows loading skeleton placeholder
Applies italic style (using skew transform)
Forces single line with ellipsis
Variants
Headings
<Typography variant="h0">48px Bold - Hero Heading</Typography>
<Typography variant="h1">32px Bold - Page Title</Typography>
<Typography variant="h2">28px Bold - Section Heading</Typography>
<Typography variant="h3">24px Bold - Subsection</Typography>
<Typography variant="h4">20px Bold - Card Title</Typography>
<Typography variant="h5">18px Semibold - Small Heading</Typography>
<Typography variant="h6">17px Bold - Smallest Heading</Typography>
Body Text
<Typography variant="body1">16px Medium - Primary body text</Typography>
<Typography variant="body2">15px Semibold - Secondary body</Typography>
<Typography variant="caption">14px Regular - Small text</Typography>
UI Elements
<Typography variant="title">17px Semibold - List item titles</Typography>
<Typography variant="button">16px Bold - Button labels</Typography>
<Typography variant="header">19px Bold - Screen headers</Typography>
<Typography variant="navigation">18px Semibold - Navigation</Typography>
Colors
<Typography color="primary">Primary theme color</Typography>
<Typography color="text">Default text color</Typography>
<Typography color="secondary">50% opacity text</Typography>
<Typography color="light">White (#FFFFFF)</Typography>
<Typography color="danger">Red (#DC1400)</Typography>
<Typography color="#369a82">Custom hex color</Typography>
Skeleton Loading
<Typography variant="title" skeleton={isLoading}>
{data?.title}
</Typography>
<Typography
variant="body1"
skeleton={isLoading}
skeletonLines={3}
skeletonWidth="80%"
>
{data?.content}
</Typography>
Alignment
<Typography align="left">Left aligned</Typography>
<Typography align="center">Center aligned</Typography>
<Typography align="right">Right aligned</Typography>
<Typography align="justify">Justified text</Typography>
Font Weight
<Typography variant="body1" weight="regular">Regular weight</Typography>
<Typography variant="body1" weight="medium">Medium weight</Typography>
<Typography variant="body1" weight="semibold">Semibold weight</Typography>
<Typography variant="body1" weight="bold">Bold weight</Typography>
Full Example
import { Stack, Typography } from 'papillon-ui';
function ProfileCard({ user, loading }) {
return (
<Stack gap={8} padding={16}>
<Typography
variant="h3"
skeleton={loading}
>
{user?.name}
</Typography>
<Typography
variant="body1"
color="secondary"
skeleton={loading}
>
{user?.email}
</Typography>
<Typography
variant="caption"
italic
skeleton={loading}
>
Member since {user?.joinDate}
</Typography>
</Stack>
);
}
