Text Component
Text component will be useful to display texts on your website. This component will help you to customize your texts easily and fast.
Installation
Ensure that have the @zyxui library installed in your project:
If you haven't install and setup @zyxui before please follow the installation guide
Basic Text
You can use text without passing any props.
Heading 1
Paragraph
codeCustomization
as
as prop can make you able to switch between element type. There are many element types that have been added to Text component:
Headings
You can switch between Heading by passing as prop. Available heading props are h1 | h2 | h3 | h4 | h5 , and h6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Typography
You can customize your text as sapn, p, mark or code also.
This is a paragraph
This is a codecolor
Customize color of the used text by passing the color prop. The value should be one of those: default | error | warning or success. And the default value is default.
This is a heading3
This is a paragraph
This is a codeweight
Customize font-weight of the Text component by passing weight prop. The available values for this prop are: thin | extralight | light | normal | medium | semibold | bold, and extrabold. And the default value is: normal.
Paragraph with thin
Paragraph with extralight
Paragraph with light
Paragraph with normal
Paragraph with medium
Paragraph with semibold
Paragraph with bold
Paragraph with extrabold
API Reference
For an in-depth exploration of available props and advanced usage, consult the Alert component's API reference:
| Property | Description | Type | Default |
|---|---|---|---|
| as | Component element. | h1 | h2 | h3 | h4 | h5 | h6 | p | span | mark | code | h1 |
| color | Customize text color. | default | error | warning | success | default |
| className | Adding custom class names to your text element. | string | undefined |
| weight | Change text font-weight value. | thin | extralight | light | normal | medium | semibold | bold | extrabold | 2extrabold | normal |