5.2.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 "positive" and "negative" for status. View footer notes for things to avoid.
import React from 'react' import { Body } from '../../' const BodyLight = () => { 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)" /> <br /> <br /> <Body status="negative" text="I am a body kit (Status: negative)" /> <Body status="positive" text="I am a body kit (Status: positive)" /> <Body status="positive" text="I am a body kit (Status: positive)" /> </div> ) } export default BodyLight
import React from 'react' import { Body } from '../../' const BodyDark = () => { return ( <div> <Body dark text="I am a body kit (Default)" /> <Body color="light" dark text="I am a body kit (Light)" /> <Body color="lighter" dark text="I am a body kit (Lighter)" /> <br /> <br /> <Body dark status="negative" text="I am a body kit (Status: negative)" /> <Body dark status="positive" text="I am a body kit (Status: positive)" /> </div> ) } export default BodyDark
import React from 'react' import { Body } from '../../' const BodyBlock = () => { return ( <div> <Body> {'I am a body kit'} </Body> </div> ) } export default BodyBlock
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.