Text
A text component offers customization for rendering various types of textual content.
Usage
Import the Text component from “figBlocks”.
Hamburger
<script> import { Text } from 'figblocks'; </script> <Text>Hamburger</Text>
Font size
The size prop determines the font-size, “small” is the default value.
Hamburger
Hamburger
Hamburger
Hamburger
<Text size="xsmall">Hamburger</Text> <Text size="small">Hamburger</Text> <Text size="large">Hamburger</Text> <Text size="xlarge">Hamburger</Text>
Font weight
The weight prop determines the font-weight, “normal” is the default value.
Hamburger
Hamburger
Hamburger
<Text weight="normal">Hamburger</Text> <Text weight="medium">Hamburger</Text> <Text weight="bold">Hamburger</Text>
Font color
The color prop accepts color tokens (CSS custom variables) for overriding the default color.
Hamburger
<Text color="--figma-color-text-brand">Hamburger</Text>
Inline
Text is inherently a block level element; passing the inline prop will render it inline.
Hamburger
<Text inline>Hamburger</Text>
Inverse
The inverse prop manually adjusts the letter spacing to match the negative application (light text on a dark background) in light mode and the positive application (dark text on a light background) in dark mode.
Note:
The Text component will automatically adjust the letter spacing for dark mode. Use the "inverse" prop only to manually switch the letter spacing.
Hamburger
<Text inverse size="xlarge">Hamburger</Text>
Props
size | “xsmall” | “small” | “large” | “xlarge” | “small” | Determines the font size. |
weight | “normal” | “medium” | “bold” | “normal” | Determines the font weight. |
inverse | boolean | false | Adjusts the letter-spacing for negative application in light mode and positive application in dark mode. |
color | color token | “—figma-color-text” | Overrides the default text color. |
inline | boolean | false | If true, the text is rendered as an inline element. |
class | string | undefined | Custom CSS classname for styling. |