Button

Use the Button component when you want users to perform an action like connecting their Ethereum account or starting a transaction. It contains a label with an optional icon before or after the label. It maps to a <button type='button'> element and extends Box.
Import component
import { Button } from "rimble-ui";

Examples

Different ways to use the Button component.
In special cases where you'd like to use a <a> styled like a Button, use <Button as='a'></Button> and provide an href.
Default button
Use to show users the primary action(s) they can take from the screen they're on.
Solid
Outline
Text
Base
Minimal styling. Used for composing buttons with more complex styles.
Different sizes
Disabled button
Use to indicate to the user that they need to do something before they can perform the action.
Icon
Use to add visual reinforcement to an action. In most cases an icon should support button copy and not replace. Copy is less ambiguous than an icon.
Loading button
Use to give users reassurance that the action they want is happening. If possible, include copy that further explains what's happening like "Loading" or "Sending"
Link button
Use when you want a primary action to navigate the user to a new page or area. Use action words as the button label.
This also requires you to import the Link component from the rimble-ui library.
Link Button Outline
Success color style
Danger color style
Custom color

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnoneSets theme
mainColorstringoptional
'primary'
Sets background color of button
contrastColorstringoptional
'white'
Sets text color of button
sizeenumoptionalnoneSets font and spacing size of button
Allowed values: 'small', 'medium', 'large',
iconstringoptionalnoneSets icon of button
iconposenumoptionalnoneSets icon position on button
Allowed values: 'left', 'right',
icononlybooloptionalnoneSets padding on button with icon and no text
heightoptional
'3rem'
minWidthoptional
'3rem'
moptional
0
pxoptional
4
pyoptional
0
fontSizeoptional
'inherit'
fontFamilyoptional
'sansSerif'
fontWeightoptional
3
coloroptional
'white'
bgoptional
'silver'
borderoptional
'none'
Styled System Props
Button uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Some best practices for using Button in your product.
Don't just use icons
Do
Don't
Don’t use button for navigational links
Button is for action-based tasks. Use Button.Text instead.
Do
Don't
Keep position consistent
This will let users know where to look when they want to perform actions
Consider visual hierarchy of buttons
Don’t use too many buttons together on one piece of interface: prioritise the most important action. Use Button.Text and Button.Outline to give your actions visual hierarchy

What's a transaction fee?

Every blockchain action requires a fee. This pays for someone in the network to update the blockchain. It doesn’t go to us. Be sure to save some ETH aside for fees.

Content

Some best practices for writing Button microcopy.
Explain what pressing the button will do
The user should understand exactly what will happen once they press the button.
Do
Don't
Keep copy concise
Don’t use articles (a, the, an) in microcopy. This will make your button quicker to scan and shorter.
Do
Don't
Explain the next step, not the end goal
Explain what the button will do at this stage in the flow.
For example, if you have a button that launches a QR code for you to scan with your mobile...
Do
Don't
Lead with a verb and follow with a noun
Don’t rely on the rest of the interface to inform the user about what their action relates to.
Do
Don't
Universally understood actions like "Save", "Next" and "Previous" etc may not need the noun.
  • MetaMaskButton – a ready-styled button to tell your users that they can connect with MetaMask
  • UPortButton – a ready-styled button ready to tell your users that they can connect with uPort
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute