Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Text

Text represent a single text line without semantic meaning.

installyarn add @clayui/core
version3.104.0
  • Examples
  • API

Beta3.104.0CHANGELOGstorybook demos

Text

PropertyDescription
aria-hidden
boolean
State indicates whether the component will be exposed to an accessibility API.
as
'p' | 'span'
Determine the way in which a text is displayed.

The default value is 'span'
children
React.ReactNode
Text content.
color
| null | 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger' | 'info'
Determine the color text.
id
string
The id global attribute defines an identifier (ID) which must be unique in the whole document.
italic
boolean
Set the text in italic style.
monospace
boolean
Set the text in monospace style.
size
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
Number to set the text size.

The default value is 4
truncate
boolean
Set the text in truncate style.
weight
| 'lighter' | 'light' | 'normal' | 'semi-bold' | 'bold' | 'bolder'
Determines the weight of the font.

TextHighlight

PropertyDescription
children
string
The component content.
match
string
Match is the string that will be compared with value.

How can this be improved? Create an issue!