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.

Connect wallet
<Button>Connect wallet</Button>
<Button>Connect wallet</Button>
Copy code

Solid

Connect wallet
<Button>Connect wallet</Button>
<Button>Connect wallet</Button>
Copy code

Outline

Connect wallet
<Button.Outline>Connect wallet</Button.Outline>
<Button.Outline>Connect wallet</Button.Outline>
Copy code

Text

Connect wallet
<Button.Text>Connect wallet</Button.Text>
<Button.Text>Connect wallet</Button.Text>
Copy code

Base

Minimal styling. Used for composing buttons with more complex styles.

Connect wallet
<Button.Base>Connect wallet</Button.Base>
<Button.Base>Connect wallet</Button.Base>
Copy code

Different sizes

Connect walletConnect wallet
<div>
  <Button size="small" mr={3}>
    Connect wallet
  </Button>

  <Button size="large">Connect wallet</Button>
</div>
<div>
  <Button size="small" mr={3}>
    Connect wallet
  </Button>
  <Button size="large">Connect wallet</Button>
</div>
Copy code

Disabled button

Use to indicate to the user that they need to do something before they can perform the action.

Connect wallet
<Button disabled>Connect wallet</Button>
<Button disabled>Connect wallet</Button>
Copy code

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.

SendSend
<Flex alignItems={"center"}>
  <Button icon="Send" mr={3}>
    Send
  </Button>

  <Button icon="Send" iconpos="right" mr={3}>
    Send
  </Button>

  <Button icon="MoreHoriz" icononly />
</Flex>
<Flex alignItems={"center"}>
  <Button icon="Send" mr={3}>
    Send
  </Button>
  <Button icon="Send" iconpos="right" mr={3}>
    Send
  </Button>
  <Button icon="MoreHoriz" icononly />
</Flex>
Copy code

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"

<Button>
  <Loader color="white" />
</Button>
<Button>
  <Loader color="white" />
</Button>
Copy code

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.

Learn More
<Button as="a" href="#!" target="\_blank" title="Learn more">
  Learn More
</Button>
<Button as="a" href="#!" target="\_blank" title="Learn more">
  Learn More
</Button>
Copy code

Link Button Outline

Learn More
<Button.Outline as="a" href="#!" target="\_blank" title="Learn more">
  Learn More
</Button.Outline>
<Button.Outline as="a" href="#!" target="\_blank" title="Learn more">
  Learn More
</Button.Outline>
Copy code

Success color style

Success button
<Button variant="success">Success button</Button>
<Button variant="success">Success button</Button>
Copy code

Danger color style

Danger button
<Button variant="danger">Danger button</Button>
<Button variant="danger">Danger button</Button>
Copy code

Custom color

Custom color buttonCustom color buttonCustom color button
<div>
  <Button mainColor="DarkCyan" marginRight={3}>
    Custom color button
  </Button>

  <Button.Outline mainColor="DarkCyan" marginRight={3}>
    Custom color button
  </Button.Outline>

  <Button.Text mainColor="DarkCyan">Custom color button</Button.Text>
</div>
<div>
  <Button mainColor="DarkCyan" marginRight={3}>
    Custom color button
  </Button>
  <Button.Outline mainColor="DarkCyan" marginRight={3}>
    Custom color button
  </Button.Outline>
  <Button.Text mainColor="DarkCyan">Custom color button</Button.Text>
</div>
Copy code

Props

'silver'

'none'

'white'

'white'

'sansSerif'

'inherit'

3

'3rem'

1

'primary'

'3rem'

'relative'

4

0

Styled System Props

Button uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.

Design guidelines

Some best practices for using Button in your product.

Don't just use icons

Don’t use Button for navigational links

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

Content

Some best practices for writing Button microcopy.

Content guidelines evidence

Explain what pressing the button will do

Keep copy concise

Explain the next step, not the end goal

Lead with a verb and follow with a noun

Related components

• 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