React Simple Components Library
Badges
<Badge color="gray" shape="square">Badge Text</Badge>
Props
color:
- gray
- red
- yellow
- green
- blue
- indigo
- purple
- pink
shape:
- square
- pill
Banners
<Banner title="Info", type="neutral">(Optional) Banner Text</Banner>
Props
type:
- error
- warning
- success
- neutral
title:
- Text to appear at the top of the banner next to the icon
Examples
Error
Warning! Something is wrong.
Neutral Banner Title
You can put whatever you want in the banner, including images: 
You've done it!
Toasts
<Toast title="Error", type="neutral", position="upper-left">Toast Text</Toast>
Props
type:
- error
- warning
- success
- neutral
title:
- Text to appear at the top of the toast next to the icon
position:
- upper-left, upper-right, lower-left, lower-right
Examples
Cards
<Card title, icon="/upload.png", bgColor="#3F75FE">Main Card Text</Card>
Props
title:
- Card title text
icon:
- path to top icon
bgColor:
- background color for the icon (for images with transparent backgrounds)
Examples
Simple Deployment
This methodology allows clients to make updates to data elements of the interface without assistance.
Robust Deployment
This methodology ensures error-free updates to all interfaces.
Titanium Deployment
This methodology is too expensive for anyone to actually implement.
Tooltips
<Tooltip color="black">
<Tooltip.DisplayText>
Tooltip Text
</Tooltip.DisplayText>
<Tooltip.Popup>
<Tooltip.PopupTitle>
Tooltip Title
</Tooltip.PopupTitle>
<Tooltip.PopupText>
Tooltip Text
</Tooltip.PopupText>
</Tooltip.Popup>
</Tooltip>
<Tooltip.DisplayText>
Tooltip Text
</Tooltip.DisplayText>
<Tooltip.Popup>
<Tooltip.PopupTitle>
Tooltip Title
</Tooltip.PopupTitle>
<Tooltip.PopupText>
Tooltip Text
</Tooltip.PopupText>
</Tooltip.Popup>
</Tooltip>
Props
color:
- white-bold
- white
- blue-bold
- blue
- purple-bold
- purple
- green-bold
- green
Example
This text has a purple-bold tooltip! Tooltip target text can be formatted however desired.
This is a tooltip title
This is the tooltip explanatory text.
Testimonials
<Testimonial name, title, image>Testimonial Text</Testimonial>
Props
name:
- Name of person quoted
title:
- Job title of person quoted
image:
- Path to image file of person being quoted
Example Below (Change screen size to view mobile version)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perspiciatis sint, illo quae dolorum porro eum magnam eligendi quaerat praesentium maiores nostrum, voluptas culpa velit, autem facere ex qui architecto.