Skip to main content

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.

NameTypeDefaultDescription
titlestringText to appear on the button
appearancefilled | outline | transparentfilledFill type of the button.
icon?bitcoin iconDisplays an icon next to the button title. By default, it appears on the left of the title text.
iconPosition?left | rightleftSpecifies on which side the icon appears with respect to the button title.
sizedefault | large | smalldefaultButton size
fullWidthbooleanfalseMakes the button full width.
disabledbooleanfalseDisables user interaction.

Playground

You can play with this component here