12.24.0
Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
Use "success" and "error" for status. View footer notes for things to avoid.
This kit uses default color by default, and can be replaced with colors below:
light lighter success error link
These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
import React from 'react' import { Body } from 'playbook-ui' const BodyLight = (props) => { return ( <div> <Body text="I am a body kit (Default)" /> <Body color="light" text="I am a body kit (Light)" /> <Body color="lighter" text="I am a body kit (Lighter)" /> <Body color="link" text="I am a body kit (Link)" /> <Body color="error" text="I am a body kit (Error)" /> <Body color="success" text="I am a body kit (Success)" /> </div> ) } export default BodyLight
Using two global props can greatly improve the readability of articles and even forms. Set Max Width to md, and Line Height to loose.
import React from 'react' import { Body } from 'playbook-ui' const BodyBlock = (props) => { return ( <> <Body lineHeight='loose' maxWidth='md' > <p>{`Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.`}</p> <br /> <p>{`- Bradley Whitford`}</p> </Body> </> ) } export default BodyBlock
Playbook styles the b, strong, a. i, em, small and u tags within the body kit to match Playbook's design system.
import React from 'react' import { Body } from 'playbook-ui' const BodyStyled = (props) => { return ( <> <Body> <b>{"This text is using the <b> tag"}</b> <br /> <br /> <strong>{"This text is using the <strong> tag"}</strong> <br /> <br /> <a href="#">{"This text is using the <a> tag"}</a> <br /> <br /> <i>{"This text is using an <i> tag"}</i> <br /> <br /> {"This "}<em>word</em>{" is using an <em> tag."} <br /> <br /> <small>{"This text is using a <small> tag."}</small> <br /> <br /> <u>{"This text is using a <u> tag."}</u> </Body> </> ) } export default BodyStyled
Do not use positive and negative variants with each other. Use Pill Kit to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.