Use the UPortButton component to let users know they can connect to your dapp using their uPort account. UPortButton maps to a <button type='button'> element and inherits props from Button.

Read Button design guidelines

Import component

import { UPortButton } from 'rimble-ui';

Examples

Different ways to use the UPortButton component.

Default

Connect with uPort
<UPortButton>Connect with uPort</UPortButton>
<UPortButton>Connect with uPort</UPortButton>
Copy code

Solid background

Connect with uPort
<UPortButton.Solid>Connect with uPort</UPortButton.Solid>
<UPortButton.Solid>Connect with uPort</UPortButton.Solid>
Copy code

Different sizes

Connect with uPort
<UPortButton size="small">Connect with uPort</UPortButton>
<UPortButton size="small">Connect with uPort</UPortButton>
Copy code

Connect with uPort
<UPortButton size="medium">Connect with uPort</UPortButton>
<UPortButton size="medium">Connect with uPort</UPortButton>
Copy code

Connect with uPort
<UPortButton size="large">Connect with uPort</UPortButton>
<UPortButton size="large">Connect with uPort</UPortButton>
Copy code

Full-width button

Connect with uPort
<UPortButton width={1}>Connect with uPort</UPortButton>
<UPortButton width={1}>Connect with uPort</UPortButton>
Copy code

Disabled

Connect with uPort
<UPortButton disabled>Connect with uPort</UPortButton>
<UPortButton disabled>Connect with uPort</UPortButton>
Copy code

Props

1

1

[1, 'auto']

UPortButton inherits all props from the Button component.

Styled System Props

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