@metamask/design-system-react
Version:
Design system react ui components
81 lines • 2.46 kB
text/typescript
/// <reference types="react" />
import type { FontFamily, FontStyle, FontWeight, OverflowWrap, TextAlign, TextVariant, TextTransform, TextColor } from "../../types/index.mjs";
export type TextProps = {
/**
* Optional prop for inline styles
*/
style?: React.CSSProperties;
/**
* Optional prop to change the font size of the component. The Text component uses responsive font sizes.
* Different variants map to specific HTML elements by default.
*
* @default TextVariant.BodyMd
*/
variant?: TextVariant;
/**
* The text content or elements to be rendered within the component.
*/
children: React.ReactNode;
/**
* Optional prop for additional CSS classes to be applied to the Text component.
*/
className?: string;
/**
* Optional prop to control the font weight of the text.
* Regular: 400
* Medium: 500
* Bold: 700
*/
fontWeight?: FontWeight;
/**
* Optional prop to adjust the font family.
* Default: Geist
* Accent: MM Sans
* Hero: MM Poly
*/
fontFamily?: FontFamily;
/**
* Optional prop to control the font style of the text.
* Options: Normal, Italic
*/
fontStyle?: FontStyle;
/**
* Optional prop to apply text transformation to the content.
* Options: Uppercase, Lowercase, Capitalize, Normal
*/
textTransform?: TextTransform;
/**
* Optional prop to control the text alignment within its container.
* Options: Left, Center, Right, Justify
*/
textAlign?: TextAlign;
/**
* Optional prop to determine how text should wrap when it reaches the edge of its container.
* Options: BreakWord, Anywhere, Normal
*/
overflowWrap?: OverflowWrap;
/**
* Optional prop that when true, adds an ellipsis (...) when text overflows its container.
*
* @default false
*/
ellipsis?: boolean;
/**
* Optional boolean that determines if the component should merge its props onto its immediate child
* instead of rendering a default DOM element.
*
* @default false
*/
asChild?: boolean;
/**
* Optional prop that sets the color of the text using predefined theme colors.
*
* @default TextColor.TextDefault
*/
color?: TextColor;
/**
* Optional prop for testing purposes
*/
'data-testid'?: string;
};
//# sourceMappingURL=Text.types.d.mts.map