Text

It's a main component for text in our interfaces. By default, this is a span tag.

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

List

A list tagged with ʻul`. It's possible to set a custom marker for all items.

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

ListProps

& {...}

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

List.Item

A list item tagged with li. It's possible to set a custom marker. Also, it is possible to customise content with <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

Quotes from great people 🙊

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

BlockquoteProps

& {...}

Name	Type	Description
author	React.ReactNode	Source of the quote

Hint

WARNING

The ButtonLink component has been implemented to replace the Hint component. Using Hint as a button or a pseudo-link is no longer recommended.

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

TypographyHintProps

& & {...}

Name	Type	Description
disabled	boolean	The value responsible for the activity of the element
active	boolean	Enable `active` state
addonLeft	React.ElementType	Left addon hint
addonRight	React.ElementType	Right addon hint

FormatText

A wrapper component required to add styles to native tags.

TIP

Note that the component is in another package intergalactic/format-text.

import FormatText from '@semcore/ui/format-text';
<FormatText />;

FormatTextProps

& {...}

Name	Type	Description
size	"s" | "m" | "l"