Content
Text with optional leading and trailing icons.
Combines text, size, and icons. as lets you choose the appropriate HTML tag. size is the text size in pixels (10–32, default 16); icons and the gap follow it, like .content in Figma. The former s, m, and l map to 12, 16, and 20.
Live example
Content
Example controls
Usage
import { CheckIcon } from '@heroicons/react/24/outline';
import { Content } from '@prosazhin/pbcomponents';
<Content
leftIcon={CheckIcon}
size={16}
>
Done
</Content>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | string | Component content. | — |
size | 10 | 12 | 14 | 16 | 20 | 24 | 3210 · 12 · 14 · 16 · 20 · 24 · 32 | Text size in pixels; icons and gap follow it. The former s, m and l are 12, 16 and 20. | 16 |
medium | boolean | Medium text weight. | false |
as | ElementTypediv · span | HTML wrapper element. | span |
leftIcon | SvgTypenone · check · search · user | Icon before the text; accepts an SVG component. | — |
rightIcon | SvgTypenone · check · search · user | Icon after the text; accepts an SVG component. | — |
leftIconClassName | string | Class of the left icon. | — |
rightIconClassName | string | Class of the right icon. | — |
className | string | Class of the root element. | — |
textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.