A text element which supports a predefined set of sizes, weights, and colors.
import React from 'react';
import { Text } from '@minddrop/ui';
export const TextDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Text size="title" color="contrast">
Hello
</Text>
</div>
);
export default TextDemo;
Import the component from the @minddrop/ui package.
import { Text } from '@minddrop/ui';
export default () => {
return <Text size="title">MindDrop</Text>;
};
TextProps extends React.HTMLAttributes<HTMLSpanElement>.
| Prop | Type | Default |
|---|---|---|
children | node | |
color | 'regular' | 'light' | 'white' | 'contrast' | 'contrast-light' | regular |
as | React.ElementType | span |
size | 'tiny' | 'small' | 'regular' | 'large' | 'title' | regular |
weight | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | regular |