A typography component to render short info texts
UsagePermalink to: Usage
Small Info is a typography component that is used to display short info texts on pages.
It will render as a <span> 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 for short informative messages
When not to usePermalink to: When not to use
- Do not use it to display paragraphs or headings
ExamplesPermalink to: Examples
BoldPermalink to: Bold
Small info non-bold (default)Small info bold
Open
import { SmallInfo } from "@peakon/bedrock/react/typography";
<SmallInfo>Small info non-bold (default)</SmallInfo>
<SmallInfo bold>Small info bold</SmallInfo>Text alignmentPermalink to: Text alignment
Text will inherit text alignment from their parent, but can be overwritten with the textAlign prop.
Small Info aligned to startSmall Info aligned centerSmall Info aligned to end
Open
import { SmallInfo } from "@peakon/bedrock/react/typography";
<SmallInfo textAlign="start">Small Info aligned to start</SmallInfo>
<SmallInfo textAlign="center">Small Info aligned center</SmallInfo>
<SmallInfo textAlign="end">Small Info aligned to end</SmallInfo>As another elementPermalink to: As another element
Small Info rendered as a HTML Div Element
Open
import { SmallInfo } from "@peakon/bedrock/react/typography";
<SmallInfo as="div">Small Info rendered as a HTML Div Element</SmallInfo>Props TablePermalink to: Props Table
Props extend from HTML Span Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
ref | any | Forwards a ref to the Small Info. | — | No |
as | HTMLElement | ReactNode | What to render the Small Info as. | span | No |
bold | boolean | Whether the text should be bold. | false | No |
textAlign | start | center | end | How the text should align (will inherit as default). | — | No |