Developer Text
It's a main component for text in our interfaces. By default, this is a span tag.
jsx
import { Text } from '@semcore/ui/typography';
<Text />;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 | 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.
jsx
import { List } from '@semcore/ui/typography';
<List />;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.
jsx
import { List } from '@semcore/ui/typography';
<List.Item />;import { List } from '@semcore/ui/typography';
<List.Item />;ListItemProps
& {...}| Name | Type | Description |
|---|---|---|
| marker | React.ReactNode | Individual marker of a list item |
Blockquote
Quotes from great people 🙊
jsx
import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;BlockquoteProps
& {...}| Name | Type | Description |
|---|---|---|
| author | React.ReactNode | Source of the quote |
Hint
The hint is very similar to Link and has a similar structure from Addon + Text.
jsx
import { Hint } from '@semcore/ui/typography';
<Hint>
<Hint.Addon />
<Hint.Text />
</Hint>;import { Hint } from '@semcore/ui/typography';
<Hint>
<Hint.Addon />
<Hint.Text />
</Hint>;HintProps
& & {...}| 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 @semcore/ui/format-text.
jsx
import FormatText from '@semcore/ui/format-text';
<FormatText />;import FormatText from '@semcore/ui/format-text';
<FormatText />;FormatTextProps
& {...}| Name | Type | Description |
|---|---|---|
| size | "s" | "m" | "l" |