Buttons

Up to four buttons in the card, each colored by a variant.

sileo.warning({ title: 'Unsaved Changes', description: 'You have edits that have not been saved yet.', buttons: [ { title: 'Save', variant: 'success', dismiss: true, onPress: save }, { title: 'Discard', variant: 'error', dismiss: true, onPress: discard }, ], });

Run

Copy

Button

title

string

The label.

onPress

() => void

Called on press. onClick, the web name, works too: one or the other.

variant

SileoVariant | neutral

success, error, warning, info, action, or neutral. Defaults to the toast’s own state.

dismiss

boolean

= false

Dismiss the toast after the press.

style

StyleProp<ViewStyle>

This button only.

textStyle

StyleProp<TextStyle>

This label only.

accessibilityLabel

string

Read instead of the title.

Four, or stacked

sileo.info({ title: 'How was your ride?', buttons: [ { title: 'Great', variant: 'success', onPress: rate }, { title: 'Okay', variant: 'info', onPress: rate }, { title: 'Meh', variant: 'warning', onPress: rate }, { title: 'Bad', variant: 'error', onPress: rate }, ], });

Run

Copy

sileo.action({ title: 'Invite Accepted', buttonLayout: 'column', buttons: [ { title: 'Say hello', onPress: greet }, { title: 'Assign a task', variant: 'success', onPress: assign }, { title: 'Not now', variant: 'neutral', dismiss: true, onPress: () => {} }, ], });

Run

Copy

Types

buttons is typed as a tuple of one to four, so a fifth is a type error, and so is a button with both onPress and onClick. The web shape, button: { title, onClick }, still works.

sileo-native

The toast from sileo, ported to React Native. Built in the open by rayanstudio.

Docs Playground GitHub sileo Case study rayanstudio.dev

A native port of sileo by hiaaryan