Typography
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 />;
TextPropsBoxProps & {...}| Property | 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 |
semibold boolean | CSS property |
medium boolean | CSS property |
italic boolean | Italicized text |
underline boolean | Underlined text |
monospace boolean | CSS property |
lineThrough boolean | Strikethrough text |
uppercase boolean | Uppercase text |
lowercase boolean | Lowercase text |
capitalize boolean | Capitalized text |
color string | Text color * |
fontSize Property.FontSize | Custom |
lineHeight Property.LineHeight | Custom |
fontWeight Property.FontWeight | Custom |
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 />;
ListPropsTextProps & {...}| Property | 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.
import { List } from '@semcore/ui/typography';
<List.Item />;
ListItemPropsTextProps & {...}| Property | Description |
|---|---|
marker React.ReactNode | Individual marker of a list item |
Blockquote
Quotes from great people 🙊
import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;
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>;
HintPropsTextProps & KeyboardFocusProps & {...}| Property | Description |
|---|---|
disabled boolean = false | The value responsible for the activity of the element |
active boolean | Enable |
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 />;