import React from 'react' import Badge from 'playbook-ui' const BadgeRounded = (props) => { return ( <div> <Badge rounded text="+1" variant="primary" /> <Badge rounded text="+4" variant="primary" /> <Badge rounded text="+1000" variant="primary" /> </div> ) } export default BadgeRounded
import React from 'react' import Badge from 'playbook-ui' const BadgeColors = (props) => { return ( <div> <div> <Badge rounded text="+1" variant="primary" /> <Badge text="+4" variant="primary" /> <Badge text="+1000" variant="primary" /> </div> <div> <Badge rounded text="+1" variant="success" /> <Badge text="+4" variant="success" /> <Badge text="+1000" variant="success" /> </div> <div> <Badge rounded text="+1" variant="warning" /> <Badge text="+4" variant="warning" /> <Badge text="+1000" variant="warning" /> </div> <div> <Badge rounded text="+1" variant="error" /> <Badge text="+4" variant="error" /> <Badge text="+1000" variant="error" /> </div> <div> <Badge rounded text="+1" variant="info" /> <Badge text="+4" variant="info" /> <Badge text="+1000" variant="info" /> </div> <div> <Badge rounded text="+1" variant="neutral" /> <Badge text="+4" variant="neutral" /> <Badge text="+1000" variant="neutral" /> </div> </div> ) } export default BadgeColors
import React from 'react' import { Hashtag } from 'playbook-ui' const HashtagDefault = (props) => { return ( <div> <Hashtag text="470297" type="project" url="https://google.com" /> <br /> <br /> <Hashtag text="123456" type="home" url="https://google.com" /> <br /> <br /> <Hashtag text="456789" type="appointment" url="https://google.com" /> <br /> <br /> <Hashtag text="654321" type="default" url="https://google.com" /> </div> ) } export default HashtagDefault
Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)
import React from 'react' import { Hashtag } from 'playbook-ui' const HashtagLink = (props) => { return ( <div> <Hashtag text="Open in the same window" type="project" url="https://google.com" /> <br /> <br /> <Hashtag newWindow text="Open in a new window" type="project" url="https://google.com" /> </div> ) } export default HashtagLink
import React from 'react' import Pill from 'playbook-ui' const PillVariants = (props) => { return ( <div> <Pill text="success" variant="success" /> <Pill text="error" variant="error" /> <Pill text="warning" variant="warning" /> <Pill text="info" variant="info" /> <Pill text="neutral" variant="neutral" /> <Pill text="primary" variant="primary" /> </div> ) } export default PillVariants
Pass textTransform = "none"
prop and the text will remain without modification.