Basic · Typography
Typography
The basic format of text, images, paragraphs, and numeric.

When to Use

  • To display the text content of articles, blogs, logs, etc.
  • To take basic operations such as copying and omitting text.

Demos

How to import

Title

Use heading to set different levels of headint title.

Text

Text component has different built-in styles. You could also pass icon to use the build-in styles for icon. Different from passing icon to children, using icon for link will have no underline in compliance with Semi Design principles.
You could pass object to link, which will be mounted on <a>.

Paragraph

Paragraph component has two spacings. You could setspacing='extended' for a looser spacing.

Numeral

Based on Text component, added properties: rule, precision, truncate, parser, to provide the ability to handle Numeral in text separately.
Note
The Numeral component recursively traverses Children to detect all numeric text within it for conversion and display, taking care to control the rendering structure hierarchy.
precision allows you to set the number of decimal places to be retained, used to set precision
truncate The truncation of the number of decimal places, optionally ceil, floor, round, aligned with Math.ceil, Math.floor, Math.round
rule for setting the parsing rules
  • set to percentages to automatically convert numbers to percentages
  • set to bytes-decimal to automatically convert numbers to bytes, 1 KB is defined as 1000 bytes, (B, KB, MB, GB, TB, PB, EB, ZB, YB)
  • Set to bytes-binary automatically converts the number to the unit of display corresponding to bytes, 1 KiB is defined as equal to 1024 bytes, (B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB)
  • When set to text, Automatic rounding of numbers only, based on the precision and truncate attributes
  • When set to numbers, non-numeric characters will be filtered and only numbers will be displayed
  • When set to exponential, numbers are automatically converted to scientific notation
Parsing rules can be customised via parser.

Size

Paragraph and Text component support two sizes, small(12px) and normal(14px). By default it is set to normal

Interactive

Copyable text.

Ellipsis

Show ellipsis if text is overflowed. Refer to Ellipsis Config for detailed configuration.
At this moment, only pure text truncation is supported.
Tips
When the tooltip does not wrap in the pop-up tooltip when the long text occurs, please set it manually word-break. The reason why we did not have built-in content is that different language content (pure English, Chinese, mixed Chinese and English) have different requirements for word-break, so the component layer does not make this preset.

API Reference

Typography.Text

PropertiesInstructionstypeDefaultversion
copyableToggle whether to be copyableboolean | object:Copyable Configfalse0.27.0
codewrap with code elementboolean-
componentCustom rendering html elementhtml elementspan
deleteDeleted stylebooleanfalse0.27.0
disabledDisabled stylebooleanfalse0.27.0
ellipsisDisplay ellipsis when text overflowsboolean|object:Ellipsis Configfalse0.34.0
iconPrefix icon.ReactNode-0.27.0
linkToggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tagboolean|objectfalse0.27.0
markMarked stylebooleanfalse0.27.0
sizeSize, one of normalsmallstringnormal0.27.0
strongBold stylebooleanfalse0.27.0
typeType, one of primary, secondary, warning, danger, tertiary(v>=1.2.0) , quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underlineUnderlined stylebooleanfalse0.27.0

Typography.Title

PropertiesInstructionstypeDefaultversion
copyableToggle whether to be copyableboolean | object:Copyable Configfalse0.27.0
componentCustom rendering html element. The default is determined by heading prophtml elementh1~h6
deleteDeleted stylebooleanfalse0.27.0
disabledDisabled stylebooleanfalse0.27.0
ellipsisDisplay ellipsis when text overflowsboolean|object:Ellipsis Configfalse0.34.0
headingHeading level, one of 1, 2, 3,4,5,6number10.27.0
linkToggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tagboolean|objectfalse0.27.0
markMarked stylebooleanfalse0.27.0
typeType, one of primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underlineUnderlined stylebooleanfalse0.27.0

Typography.Paragraph

PropertiesInstructionstypeDefaultversion
copyableToggle whether to be copyableboolean | object:Copyable Configfalse0.27.0
componentCustom rendering html elementhtml elementp
deleteDeleted stylebooleanfalse0.27.0
disabledDisabled stylebooleanfalse0.27.0
ellipsisDisplay ellipsis when text overflowsboolean|object:Ellipsis Configfalse0.34.0
linkToggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tagboolean|objectfalse0.27.0
markMarked stylebooleanfalse0.27.0
sizeSize, one of normalsmallstringnormal0.27.0
spacingparagraph spacing, one of normal, extendedstringnormal0.27.0
strongBold stylebooleanfalse0.27.0
typeType, one of primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underlineUnderlined stylebooleanfalse0.27.0

Typography.Numeral

PropertiesInstructionstypeDefaultversion
ruleParsing rules, one of text, numbers, bytes-decimal, bytes-binary, percentages, currency, exponentialstringtext2.22.0
precisionallows you to set the number of decimal places to be retained, used to set precisionnumber02.22.0
truncateThe truncation of the number of decimal places, optionally ceil, floor, round, aligned with Math.ceil, Math.floor, Math.roundstringround2.22.0
parserCustom numeral parsing functions(str: string) => string-2.22.0
copyableToggle whether to be copyableboolean | object:Copyable Configfalse2.22.0
codewrap with code elementboolean-2.22.0
componentCustom rendering html elementhtml elementspan2.22.0
deleteDeleted stylebooleanfalse2.22.0
disabledDisabled stylebooleanfalse2.22.0
ellipsisDisplay ellipsis when text overflowsboolean | object:Ellipsis Configfalse2.22.0
iconPrefix icon.ReactNode-2.22.0
linkToggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tagboolean | objectfalse2.22.0
markMarked stylebooleanfalse2.22.0
sizeSize, one of normalsmallstringnormal2.22.0
strongBold stylebooleanfalse2.22.0
typeType, one of primary, secondary, warning, danger, tertiary(v>=1.2.0) , quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary2.22.0
underlineUnderlined stylebooleanfalse2.22.0

Ellipsis Config

v >= 0.34.0
PropertiesInstructionstypeDefault
collapseTextDisplayed text to collapsestringCollapse
collapsibleToggle whether text is collapsiblebooleanfalse
expandTextDisplayed text to expandstringExpand
expandableToggle whether text is expandablebooleanfalse
posPosition to start ellipsis, one of end, middlestringend
rowsNumber of rows that should not be truncatednumber1
showTooltipToggle whether to show tooltip, if passed in as object: type,type of component to show tooltip, one of Tooltip, Popover; opts, properties that will be passed directly to the componentboolean|{type: 'tooltip'|'popover', opts: object}false
suffixText suffix that will not be truncatedstring-
onExpandCallback when expand or collapsefunction(expanded: bool, Event: e)-

Copyable Config

PropertiesInstructionsTypeDefaultVersion
contentCopied contentstring-0.27.0
copyTipTooltip content when hovering over iconReact.node-1.0.0
successTipSuccessful tip contentReact.node-0.33.0
onCopyCallback for copy actionFunction(e:Event, content:string, res:boolean)-0.27.0

Content Guidelines

  • Link
    • Text links need to be clear and predictable, users should be able to predict what will happen when they click on the link
    • Do not mislead users by mislabeling links
    • Avoid using "Click here" or "Here" as stand-alone links
✅ Recommended usage❌ Deprecated usage
No spaces yet? Create space No spaces yet? Click here
  • Avoid using entire sentences as clickable text links, and instead use text that describes where to go as the link content
✅ Recommended usage❌ Deprecated usage
Views user documentation for detailsView user documentation for details
  • Using short terms or words as link text is more conducive to internationalization, to avoid the problem of link text being split due to different grammar and word order in different languages
✅ Recommended usage❌ Deprecated usage
Manage notifications toManage notifications to
  • When ending with a text link, there is no need to follow punctuation, except for the question mark "?"
✅ Recommended usage❌ Deprecated usage
No spaces yet? Create space No spaces yet? Click here
Forgot password ?Forgot password
  • Link text does not contain the articles "the, a, an"
✅ Recommended usage❌ Deprecated usage
View user documentation for detailsView the user documentation for details

Design Tokens