Typography
Text
Storybook
Text
Storybook
Text is used to render different types of text, with the ability to control the size, style, alignment, color, and other attributes.
Imports
1import { Text } from 'dd360-ds'1import Text from 'dd360-ds/Text'Usage
This is an example message
1import { Text } from 'dd360-ds'
2
3<Text >This is an example message</Text>Variant
You can customize the size and style of the text with the following variants:
1import { Text } from 'dd360-ds'
2
3<Text variant='h1'>h1</Text>
4<Text variant='h2'>h2</Text>
5<Text variant='h3'>h3</Text>
6<Text variant='h4'>h4</Text>
7<Text variant='h5'>h5</Text>
8<Text variant='p'>p</Text>
9<Text variant='span'>span</Text>
10<Text variant='small'>small</Text>
11<Text variant='label'>label</Text>
12<Text variant='a'>a</Text>
13<Text variant='currency'>currency</Text>
14<Text variant='anchorSmall'>anchorSmall</Text>Align
You can align the text with the following aligns:
Right
Left
Center
Justify
1import { Text } from 'dd360-ds'
2
3<Text align='right' >
4 Right
5</Text>
6<Text align='left' >
7 Left
8</Text>
9<Text align='center' >
10 Center
11</Text>
12<Text align='justify' >
13 Justify
14</Text>Bold
You can customize with bold
This is an example of the text bold
1import { Text } from 'dd360-ds'
2
3<Text bold>
4 This is an example of the text bold
5</Text>TextMuted
You can customize it with a soft gray color
This is an example textMuted
1import { Text } from 'dd360-ds'
2
3<Text textMuted>
4 This is an example textMuted
5</Text>TextMuted500
You can customize it with a stronger gray color
This is an example textMuted500
1import { Text } from 'dd360-ds'
2
3<Text textMuted500>
4 This is an example textMuted500
5</Text>Size
You can customize the size
2xlxllgmdsm
1import { Text } from "dd360-ds"
2
3<Text size="2xl">2xl</Text>
4<Text size="xl">xl</Text>
5<Text size="lg">lg</Text>
6<Text size="md">md</Text>
7<Text size="sm">sm</Text>You can also customize the size in such a way that it is responsive
2xl
1import { Text } from "dd360-ds"
2
3<Text size={{ sm: "p", lg: "2xl" }}>2xl</Text>FontBold
You can customize the font weight
This is an example with mediumThis is an example with bold
1import { Text } from "dd360-ds"
2
3<Text fontBold="medium">This is an example with medium</Text>
4<Text fontBold="bold">This is an example with bold </Text>TextColor
You can customize the color
This is an example of the color blue
1import { Text } from "dd360-ds"
2
3<Text textColor="text-blue-600">This is an example of the color blue</Text>Default value
You can customize the default value using the defaultValue prop and showDefaultValue to show the default value.
---
1import { Text } from "dd360-ds"
2
3<Text showDefaultValue defaultValue="---"></Text>API Reference
| Name | Types | Default |
|---|---|---|
| "variant" | string | p |
| "align" | left center right justify | center |
| "bold" | boolean | true |
| "textMuted" | boolean | false |
| "textMuted500" | boolean | false |
| "fontBold" | medium bold | true |
| "size" | sm md lg xl 2xl string | - |
| "textColor" | string | - |
| "className" | string | - |
| "children" | ReactNode | - |
| "href" | string | - |
| "target" | string | - |
| "style" | CSSProperties | - |
| "onClick" | function | - |
| "onBlur" | function | - |
| "defaultValue" | string | - |
| "showDefaultValue" | boolean | true |