Typography

Typography component provides a flexible way to display text with various styling options and sizes. It supports different text styles, sizes, and formatting options to create consistent and visually appealing text elements.

Basic Usage

import { Typography } from "@carton-org/react-neumorphism";

<Typography>This is a basic text example</Typography>;

Live Example

This is a basic text example

Props

Name	Type	Description	Required	Default Value
children	React.ReactNode	The content to be displayed	Yes	-
size	"xs" | "sm" | "md" | "lg" | "xl"	The size of the text	No	"md"
bold	boolean	Whether the text should be bold	No	false
italic	boolean	Whether the text should be italic	No	false
underline	boolean	Whether the text should be underlined	No	false
ellipsis	boolean	Whether to show ellipsis for overflow text	No	false
paragraph	boolean	Whether to render as a paragraph element	No	false
underSized	boolean	Whether to use a smaller size than specified	No	false
overSized	boolean	Whether to use a larger size than specified	No	false
variant	TypographyVariant	The typography variant to use	No	-
labelStyle	React.CSSProperties	Custom CSS styles for the label	No	-

Examples

Different Sizes

Extra Small TextSmall TextMedium TextLarge TextExtra Large Text

Text Styles

Text Styles

Bold TextItalic TextUnderlined Text

Combined Styles

Paragraph and Ellipsis

This is a paragraph text that will wrap to multiple lines. It demonstrates how the paragraph prop affects the text display.

This is a very long text that will be truncated with an ellipsis when it overflows its container.

Size Modifiers

Medium size with underSized modifier

Medium size with overSized modifier