AlertDialog

import { AlertDialog, Button } from "@grassroot/ui-react";
 
const [open, setOpen] = React.useState(false);
 
<Button onClick={() => setOpen(true)}>Tear down…</Button>
<AlertDialog
  open={open}
  onOpenChange={setOpen}
  onConfirm={() => {}}
  title="Tear down ledger-api?"
  description="This cannot be undone."
  confirmLabel="Tear down"
/>

<script setup lang="ts">
import { ref } from "vue";
import { Button, AlertDialog } from "@grassroot/ui-vue";
 
const open = ref(false);
</script>
 
<template>
  <Button @click="open = true">Tear down…</Button>
  <AlertDialog
    v-model:open="open"
    @confirm="undefined"
    title="Tear down ledger-api?"
    description="This cannot be undone."
    confirm-label="Tear down"
  />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootButton, GrassrootAlertDialog } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootButton, GrassrootAlertDialog],
  template: `
    <grassroot-button (click)="open.set(true)">Tear down…</grassroot-button>
    <grassroot-alert-dialog
      [open]="open()"
      (openChange)="open.set($event)"
      (confirm)="undefined"
      title="Tear down ledger-api?"
      description="This cannot be undone."
      confirmLabel="Tear down"
    />
  `,
})
export class ExampleComponent {
  readonly open = signal(false);
}

<script lang="ts">
  import { Button, AlertDialog } from "@grassroot/ui-svelte";
 
  let open = $state(false);
</script>
 
<Button onClick={() => open = true}>Tear down…</Button>
<AlertDialog
  open={open}
  onOpenChange={(next) => (open = next)}
  onConfirm={() => {}}
  confirmLabel="Tear down"
>{#snippet title()}Tear down ledger-api?{/snippet}
{#snippet description()}This cannot be undone.{/snippet}
</AlertDialog>

import { createSignal } from "solid-js";
import { Button, AlertDialog } from "@grassroot/ui-solid";
 
export function Example() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <>
      <Button onClick={() => setOpen(true)}>Tear down…</Button>
      <AlertDialog
        open={open()}
        onOpenChange={setOpen}
        onConfirm={() => {}}
        title="Tear down ledger-api?"
        description="This cannot be undone."
        confirmLabel="Tear down"
      />
    </>
  );
}