Skip to content

Typography

Style5.11.2

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 />;
typeTextProps
BoxProps & {...}
PropertyDescription
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

Custom font-size

lineHeight
Property.LineHeight

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 />;
typeListProps
TextProps & {...}
PropertyDescription
marker
React.ReactNode =

Marker of the entire list

List.Item

A list item tagged with li. It's possible to set a custom marker.

import { List } from '@semcore/ui/typography';
<List.Item />;
typeListItemProps
TextProps & {...}
PropertyDescription
marker
React.ReactNode

Individual marker of a list item

Blockquote

Quotes from great people 🙊

import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;
typeBlockquoteProps
BoxProps & {...}
PropertyDescription
author
React.ReactNode

Source of the quote

Hint

The hint is very similar to Link and has a similar structure from Addon + Text.

import { Hint } from '@semcore/ui/typography';
<Hint>
  <Hint.Addon />
  <Hint.Text />
</Hint>;
typeHintProps
TextProps & KeyboardFocusProps & {...}
PropertyDescription
disabled
boolean = false

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.

Note that the component is in another package @semcore/ui/format-text.

import FormatText from '@semcore/ui/format-text';
<FormatText />;
typeFormatTextProps
BoxProps & {...}
PropertyDescription
size
"s" | "m" | "l"