Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Text

The basic text primitive for rendering things like paragraphs and headings.

Basic variants

Sancho comes with a number of basic text variants. You should try to stick with these as often as possible.

Basic text
Uppercase variant
Hidden variant

Paragraph variant

Subtitle variant

Lead variant

H6 variant
h5 variant

h4 variant

h3 variant

h2 variant

h1 variant

display3 variant

display2 variant

display1 variant

<div>
  <Text>Basic text</Text>
  <Text variant="uppercase">Uppercase variant</Text>
  <Text variant="hidden">Hidden variant</Text>
  <Text variant="paragraph">Paragraph variant</Text>
  <Text variant="subtitle">Subtitle variant</Text>
  <Text variant="lead">Lead variant</Text>
  <Text variant="h6">H6 variant</Text>
  <Text variant="h5">h5 variant</Text>
  <Text variant="h4">h4 variant</Text>
  <Text variant="h3">h3 variant</Text>
  <Text variant="h2">h2 variant</Text>
  <Text variant="h1">h1 variant</Text>
  <Text variant="display3">display3 variant</Text>
  <Text variant="display2">display2 variant</Text>
  <Text variant="display1">display1 variant</Text>
</div>

Other options

I will have no margin, and I won't wrap.

<div>
  <Text variant="paragraph" gutter={false} wrap={false}>
    I will have no margin, and I won't wrap.
  </Text>
</div>

API

Text
variantTextVariants
The text style
wrapboolean
Use text-overflow: ellipsis styling when set to false
mutedboolean
Use muted colors
gutterboolean
Set to false to remove any bottom margins
componentReactType<TextProps>
cssInterpolationWithTheme<any>
```