Text

Display text using well-defined typographic styles.

Headings

Use Text to standardize text content.

Preview

See code

Hello my friend, have fun with Bolio UI 🥷🏼

Paragraph

Add p and b attributes to a Text.

Preview

See code

Make your development more creative and with amazing tools for React.

Make your development more creative and with amazing tools for React.

Small

Add small attributes to a Text.

Preview

See code

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Blockquote

Add blockquote attributes to a Text.

Preview

See code

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Types

You can change the color of the Text with the property type.

Preview

See code

Text colored
Text colored
Text colored
Text colored
Text colored
Text colored
Text colored

Sizes

Text of different sizes.

Preview

See code

Font Size: 12px;

Font Size: 14px;

Font Size: 1rem;

Font Size Scale: 1.25;

Compose

Effect of multiple Text stacks

Preview

See code

Build encapsulated components that manage their own state, then compose them to make complex UIs.

~~Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.~~We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

APIs

Text.Props

Attribute	Description	Type	Accepted values	Default
p	component name	`boolean`	-	`true`
h1 - h6	component name	`boolean`	-	`false`
small	component name	`boolean`	-	`false`
span	component name	`boolean`	-	`false`
del	component name	`boolean`	-	`false`
i	component name	`boolean`	-	`false`
em	component name	`boolean`	-	`false`
b	component name	`boolean`	-	`false`
blockquote	component name	`boolean`	-	`false`
type	text type	`TextTypes`	TextTypes	`default`
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

TextTypes

type TextTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

Edit this page on GitHub

Tag

Textarea

MADE & DESIGNED WITHBY BRUNO ANDRADE