Button

Buttons allow user to trigger actions or events with a single tap.

Import

To add the Button component to your project you can import it as follows:

import { Button } from '@amalgamaco/embassy-ui';

Examples

Click!

<Button variant="primary" margin="3" onPress={() => {window.alert( 'Clicked!' );}}>
    Click!
</Button>

Props

variant

The variant style to use, available values are: primary, secondary, priority y success. You can add more variants extending the theme configuration for this component.

Primary

Secondary

High Priority

Success

onPress

Called when the button is pressed.

Click me!

<Button
    variant="primary"
    onPress={() => {window.alert( 'Clicked!' );}}
    margin="3"
    width="300px"
>
    Click me!
</Button>

disabled

If the button is disabled or not. Boolean.

Disabled

<Button width="300px" variant="primary" disabled>Disabled</Button>

leftIcon

An icon component to show at the left part of the button.



Add

<Button width="300px" variant="success" leftIcon={<Icon name="plus" />}>Add</Button>

rightIcon

An icon component to show at the right part of the button.

Block



<Button width="300px" variant="priority" rightIcon={<Icon name="close" />}>Block</Button>

Pseudo Props

__label

Props to be applied to the internal Text component showing the label text.

TYPE	REQUIRED
ITextProps	No

__stack

Props to be applied to the internal Stack component which contains the label and the icons.

TYPE	REQUIRED
IStackProps	No

__leftIcon

Props to be applied to the internal Icon component showing the left icon.

TYPE	REQUIRED
IIconProps	No

__rightIcon

Props to be applied to the internal Icon component showing the right icon.

TYPE	REQUIRED
IIconProps	No