Toast Svelte 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
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

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

Toast Slots

NameDescription
button

Toast button content

Examples

Toast.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Button,
Toast,
Block,
} from 'konsta/svelte';
let toastLeftOpened = false;
let toastCenterOpened = false;
let toastRightOpened = false;
const openToast = (setter) => {
// close other toast
toastLeftOpened = false;
toastCenterOpened = false;
toastRightOpened = false;
setter();
};
</script>
<Page>
<Navbar title="Toast" />
<Block strong class="space-y-4">
<Toast position="left" opened={toastLeftOpened}>
<Button
slot="button"
clear
inline
onClick={() => (toastLeftOpened = false)}
>
Close
</Button>
<div class="shrink">Hello this is left toast!</div>
</Toast>
<Toast position="center" opened={toastCenterOpened}>
<Button
slot="button"
clear
inline
onClick={() => (toastCenterOpened = false)}
>
Close
</Button>
<div class="shrink">Hello this is center toast!</div>
</Toast>
<Toast position="right" opened={toastRightOpened}>
<Button
slot="button"
clear
inline
onClick={() => (toastRightOpened = false)}
>
Close
</Button>
<div class="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(() => (toastLeftOpened = true))}>
Toast on Left
</Button>
</p>
<p>
<Button onClick={() => openToast(() => (toastCenterOpened = true))}>
Toast on Center
</Button>
</p>
<p>
<Button onClick={() => openToast(() => (toastRightOpened = true))}>
Toast on Right
</Button>
</p>
</Block>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.