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-black'
colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIosstring'text-white'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'div'

Component's HTML Element

openedbooleanfalse

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 'konsta/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 strongIos outlineIos className="space-y-4">
<Toast
position="left"
opened={toastLeftOpened}
button={
<Button
rounded
clear
small
inline
onClick={() => setToastLeftOpened(false)}
>
Close
</Button>
}
>
<div className="shrink">Hello this is left toast!</div>
</Toast>
<Toast
position="center"
opened={toastCenterOpened}
button={
<Button
rounded
clear
small
inline
onClick={() => setToastCenterOpened(false)}
>
Close
</Button>
}
>
<div className="shrink">Hello this is center toast!</div>
</Toast>
<Toast
position="right"
opened={toastRightOpened}
button={
<Button
rounded
clear
small
inline
onClick={() => setToastRightOpened(false)}
>
Close
</Button>
}
>
<div className="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.
2022 © Konsta UI by nolimits4web.