SpToast · SpToaster

import { useState } from 'react';
import { SpButton } from '@silverpoint/react/ui/button';
import { SpToast, SpToaster } from '@silverpoint/react/ui/toast';

export function Save() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <SpButton onClick={() => setOpen(true)}>Save</SpButton>
      <SpToaster position="bottom-end">
        {/* error and warning are announced assertively; onOpenChange(false) when it closes */}
        <SpToast title="Saved" description="The drawing was saved." kind="success" open={open} onOpenChange={setOpen} />
      </SpToaster>
    </>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { SpButton } from '@silverpoint/vue/ui/button';
import { SpToast, SpToaster } from '@silverpoint/vue/ui/toast';

const open = ref(false);
</script>

<template>
  <SpButton @click="open = true">Save</SpButton>
  <SpToaster position="bottom-end">
    <SpToast v-model:open="open" title="Saved" description="The drawing was saved." kind="success" />
  </SpToaster>
</template>

import { Component, signal } from '@angular/core';
import { SpButton } from '@silverpoint/angular/ui/button';
import { SpToast, SpToaster } from '@silverpoint/angular/ui/toast';

@Component({
  selector: 'app-save',
  imports: [SpButton, SpToast, SpToaster],
  template: `
    <button spButton (click)="open.set(true)">Save</button>
    <sp-toaster position="bottom-end">
      <sp-toast [(open)]="open" title="Saved" description="The drawing was saved." kind="success" />
    </sp-toaster>
  `,
})
export class Save {
  protected readonly open = signal(false);
}

sp_button("Save", on_click=State.save)  # sets toast_open = True

sp_toaster(
    sp_toast(
        "Saved",
        "The drawing was saved.",
        kind="success",
        open=State.toast_open,
        on_open_change=State.set_toast_open,  # False when it closes
    ),
    position="bottom-end",  # the default; logical, so it mirrors in right-to-left text
)