Toast React Component

Toasts provide brief feedback about an operation through a message on the screen.

Toast Components

There are following components included:

  • Toast

Toast Props

NameTypeDefaultDescription
buttonReactNode

Toast button content

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-toast-ios'

Toast bg in iOS theme

colors.bgMaterialstring'bg-toast-material'

Toast bg in Material theme

colors.textstring'text-white'

Toast text color

componentstring'div'

Component's HTML Element

openedstringfalse

Allows to open/close Toast and set its initial state

position'left' | 'right' | 'center''left'

Toast position (only on wide screens). Can be left, center or right

translucentbooleantrue

Makes Toast background translucent (with backdrop-filter: blur) in iOS theme

Examples

Toast.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Button,
Toast,
Block,
} from 'tailwind-mobile/react';
export default function ToastPage() {
const [toastLeftOpened, setToastLeftOpened] = useState(false);
const [toastCenterOpened, setToastCenterOpened] = useState(false);
const [toastRightOpened, setToastRightOpened] = useState(false);
const openToast = (setter) => {
// close other toast
setToastLeftOpened(false);
setToastCenterOpened(false);
setToastRightOpened(false);
setter(true);
};
return (
<Page>
<Navbar
title="Toast"
/>
<Block strong className="space-y-4">
<Toast
position="left"
opened={toastLeftOpened}
button={
<Button clear inline onClick={() => setToastLeftOpened(false)}>
Close
</Button>
}
>
<div className="flex-shrink">Hello this is left toast!</div>
</Toast>
<Toast
position="center"
opened={toastCenterOpened}
button={
<Button clear inline onClick={() => setToastCenterOpened(false)}>
Close
</Button>
}
>
<div className="flex-shrink">Hello this is center toast!</div>
</Toast>
<Toast
position="right"
opened={toastRightOpened}
button={
<Button clear inline onClick={() => setToastRightOpened(false)}>
Close
</Button>
}
>
<div className="flex-shrink">Hello this is right toast!</div>
</Toast>
<p>
Toasts provide brief feedback about an operation through a message on
the screen.
</p>
<p>
<Button onClick={() => openToast(setToastLeftOpened)}>
Toast on Left
</Button>
</p>
<p>
<Button onClick={() => openToast(setToastCenterOpened)}>
Toast on Center
</Button>
</p>
<p>
<Button onClick={() => openToast(setToastRightOpened)}>
Toast on Right
</Button>
</p>
</Block>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.