Text

The main component for handling typography in our interfaces. Renders as a span tag by default.

import { Text } from '@semcore/ui/typography';
<Text />;

TextProps

& {...}

Name	Type	Description
size	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800	Font size and line-heights
noWrap	boolean	The text will not be wrapped on a new line and will be cut off with ellipsis
bold	boolean	CSS property `font-weight: 700;`
semibold	boolean	CSS property `font-weight: 600;`
medium	boolean	CSS property `font-weight: 500;`
italic	boolean	Italicized text
underline	boolean	Underlined text
monospace	boolean	CSS property `font-family: monospace;`
lineThrough	boolean	Strikethrough text
uppercase	boolean	Uppercase text
lowercase	boolean	Lowercase text
capitalize	boolean	Capitalized text
color	string	Text color *
fontSize	Property.FontSize<any>	Custom `font-size`
lineHeight	Property.LineHeight<any>	Custom `line-height`
fontWeight	Property.FontWeight	Custom `font-weight`
textAlign	Property.TextAlign	Text alignment
use	"primary" | "secondary"	Enforces text color
disabled	boolean	Makes text semi-transparent to indicate disabled state
formatTags	boolean	Enable formatting/styling for all nested HTML tags with our default styles for them

List

A list rendered with the ul tag. You can set a custom marker for all list items.

import { List } from '@semcore/ui/typography';
<List />;

INFO

The size property of this component only accepts the values 100, 200, and 300.

ListProps

& {...}

Name	Type	Description
marker	React.ReactNode	Marker of the entire list

List.Item

A list item rendered with the li tag. You can set a custom marker and customize the content using <List.Item.Content />.

import { List } from '@semcore/ui/typography';
<List.Item />;
<List.Item.Content />;

ListItemProps

& {...}

Name	Type	Description
marker	React.ReactNode	Individual marker of a list item

ListItemContentProps

Blockquote

A component for displaying quoted text.

import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;

BlockquoteProps

& {...}

Name	Type	Description
author	React.ReactNode	Source of the quote

FormatText

WARNING

FormatText is deprecated. To style native tags, wrap them in Text. Refer to the Native typography tags example