A typography component to render a body of text.
UsagePermalink to: Usage
Body Text is a typography component that is used to display bodies of text on a page.
It will render as a <p> element as default, but can be changed to any other element or React component with the as prop.
When to usePermalink to: When to use
- Use it to display bodies of text, eg. descriptions
When not to usePermalink to: When not to use
- Do not use it to display any sort of heading or label
ExamplesPermalink to: Examples
SizesPermalink to: Sizes
Body Text has three sizes: small, medium (default), and large.
Open
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return (
<Stack spacing={8}>
<BodyText size="small">Small body text</BodyText>
<BodyText>Medium body text (default)</BodyText>
<BodyText size="large">Large body text</BodyText>
</Stack>
);
}ColorsPermalink to: Colors
Body Text has two colors: body which is the default text color, and hint which is used for help text and secondary content.
Open
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return (
<Stack spacing={8}>
<BodyText>body variant (default)</BodyText>
<BodyText variant="hint">hint variant</BodyText>
</Stack>
);
}BoldPermalink to: Bold
Open
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return <BodyText bold>A bold body text</BodyText>;
}Text alignmentPermalink to: Text alignment
Text will inherit text alignment from their parent, but can be overwritten with the textAlign prop.
Open
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return (
<Stack spacing={8}>
<BodyText textAlign="start">Body text aligned to start</BodyText>
<BodyText textAlign="center">Body text aligned center</BodyText>
<BodyText textAlign="end">Body text aligned to end</BodyText>
</Stack>
);
}As another elementPermalink to: As another element
Open
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return (
<BodyText as="span">Body text rendered as a HTML Span Element</BodyText>
);
}Props TablePermalink to: Props Table
Props extend from HTML Paragraph Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
ref | any | Forwards a ref to the Body Text. | — | No |
as | HTMLElement | ReactNode | What to render the Body Text as. | p | No |
size | small | medium | large | Size of the text. | medium | No |
bold | boolean | Whether the text should be bold. | false | No |
variant | body | hint | The color of the text. | body | No |
textAlign | start | center | end | How the text should align (will inherit as default). | — | No |