components
Text Count
v.1.0.0 | Saturn
StorybookComponent that displays the amount of text entered in relation to a maximum limit.
<TextCount variant={'DEFAULT'} maxLength={5} currentCharacters={3} textVariant={'DEFAULT'} />Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for its quick use. Access them through the variant prop:
<TextCount variant={'DEFAULT'} maxLength={5} currentCharacters={3} textVariant={'DEFAULT'} />MaxLength & CurrentCharacters
These properties set the maximum number of characters written and how many are currently written. The maxLength is represented in the right position and the currentCharacters in the left position.
<TextCount variant={'DEFAULT'} maxLength={10} currentCharacters={6} textVariant={'DEFAULT'} />TextVariant
Internally it uses the Text component. This property is used to change the text variant.
<TextCount variant={'DEFAULT'} maxLength={10} currentCharacters={6} textVariant={'DEFAULT'} /> <TextCount variant={'DEFAULT'} maxLength={10} currentCharacters={6} textVariant={'PARAGRAPH_MEDIUM_EXPANDED'} /> <TextCount variant={'DEFAULT'} maxLength={10} currentCharacters={6} textVariant={'HEADING_H1_EXTENDED'} />
COLORS AND WEIGHTS
The component has several props to change the color and weight of the text. The color prop changes the color of the text, and the weight prop changes the weight of the text.
- leftColor: it changes the color of the left text.
- rightColor: it changes the color of the right text.
- leftWeight: it changes the weight of the left text.
- rightWeight: it changes the weight of the right text.
<TextCount
variant={'DEFAULT'}
maxLength={10}
currentCharacters={6}
textVariant={'DEFAULT'}
leftColor={'#1cd44d'}
rightColor={'red'}
leftWeight={400}
rightWeight={600}
/>