Text#
The <Text>
component renders a <span>
with basic reset styles by default.
A text comes in two different forms:
Text.Block
: Text rendered as block display.Text
: Text rendered as inline.
The inline Text
component should only be rendered within a:
- Text.Block
- Paragraph
- Heading
- Link.Block
- List.Item
Import#
import { Text } from 'bumbag'
Usage#
Hello world! This is a bit of text.
Editable example
Other elements#
Bold
Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough
Sample
sub
sup
Italic
Underline
I18N
Citation
Emphasis
Inserted
Ctrl + C
Highlighted
Sample
sub
sup
Editable example
Text Props#
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
Theming#
Text.styles.base
Hello world
On this page