Skip to main content

Modal

This element is an overlay above the app's content. It's great for showing prompts or informing users.

How to use it

import { Modal } from 'etta-ui';

<Modal
title="You have a lightning invoice on your clipboard"
message="Would you like to use this invoice for a transaction?"
actionButton={{
title: "Okay",
onPress: () => 0,
}}
cancelButton={{
title: "Cancel",
onPress: () => 0,
}}
/>;

Variations

One action button

Incoming on-chain transaction
To save on the currently high fees, these funds will become available in about 2-3 hours.
Okay

With cancel button

You have a lightning invoice on your clipboard
Would you like to use this invoice for a transaction?
Cancel
Okay

Props

NameTypeDefaultDescription
titlestringHeading on the modal
messagestringDescriptive text below the heading on the modal
actionButton{title: string, onPress: () => void}Action button title and function to be carried out when pressed
cancelButton{title: string, onPress: () => void}Cancel button title and function to be carried out when pressed

Playground

You can play with this component here. For best results, use Expo Go on your own device.