Button
A touchable, interactive element that initiates an action and or event. Buttons display text and can also include icons.
How to use it
import { Button } from 'etta-ui';
<Button
title="Click me"
size="default"
appearance="filled"
icon="icon-bitcoin-circle"
iconPosition="left"
onPress={doSomethingFn}
/>;
Variations
Appearance
Buttons can appear filled, outline or transparent
Filled
Outline
Transparent
Size
Buttons can be small, "normal size", or large
Small
Default
Large
State
While all the buttons above appear active, they can also be disabled and therefore uninteractive.
Filled & disabled
Outline & disabled
Transparent & disabled
With Icons
Icon on the left
Icon on the right
Props
note
Includes all TouchableOpacityProps props.
Name | Type | Default | Description |
---|---|---|---|
title | string | Text to appear on the button | |
appearance | filled | outline | transparent | filled | Fill type of the button. |
icon? | bitcoin icon | Displays an icon next to the button title. By default, it appears on the left of the title text. | |
iconPosition? | left | right | left | Specifies on which side the icon appears with respect to the button title. |
size | default | large | small | default | Button size |
fullWidth | boolean | false | Makes the button full width. |
disabled | boolean | false | Disables user interaction. |
Playground
You can play with this component here