Modal
Used to shows a dialog element when clicked.
Example
ModalExample.svelte
<script>
import { Button, Modal } from "saraui"
//closed by default
let isOpen = false
<script>
<Button onClick={() => isOpen = true}>
Open modal
</Button>
<Modal bind:isOpen>
<!-- build your custom modal here -->
</Modal>ConfirmationModal
Quickly build confirmation modals to confirm sensible (or not) actions.
By default confirmation modal will have an error-like button Accept. You can change the color through the color prop.
Example
ConfirmationModalExample.svelte
<script>
import { Button, ConfirmationModal } from "saraui"
//closed by default
let isOpen = false
function acceptSensibleAction() {
...
}
</script>
<Button onClick={() => isOpen = true}>
Open confirmation modal
</Button>
<ConfirmationModal bind:isOpen
onAccept={acceptSensibleAction}
title="Leaving"
content="Are you sure you want to leave?"
/>Props
isOpen:
boolean
(Modal) isClosable?:
boolean
(Modal) onClose?:
() => void
(ConfirmationModal) title:
string
(ConfirmationModal) content:
string
(ConfirmationModal) onAccept:
(Event) => void | (Event) => Promise<void>
(ConfirmationModal) acceptText?:
string
(ConfirmationModal) cancelText?:
string
(ConfirmationModal) color?:
"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"
(ConfirmationModal) icons?:
ConfirmationModalIcons
Types
ConfirmationModalIcons
{
positions?: "left" | "right"
accept?: IconClassString
cancel?: IconClassString
}