Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    AlertDialog

    A modal window that interrupts a task to ask one question, to confirm or cancel.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { AlertDialog } from '@bigbang/ui';
    Source
    AlertDialog.tsx
    Storybook
    AlertDialog · Playground

    AlertDialog is in the @bigbang/ui package.

    import { AlertDialog, Button } from '@bigbang/ui';
    

    <AlertDialog
      tone="danger"
      trigger={<Button variant="secondary" tone="danger">Delete item</Button>}
      title="Delete item?"
      description="This cannot be undone."
      confirmLabel="Delete"
      onConfirm={() => deleteItem()}
    />;

    Props

    Section titled “Props”
    titleRequired
    Description
    The question to decide, such as "Öğe silinsin mi?". It names the dialog.
    Type
    ReactNode
    descriptionRequired
    Description
    What happens if people confirm, especially what cannot be undone. Read when the dialog opens.
    Type
    ReactNode
    confirmLabelRequired
    Description
    Label of the confirm action: a verb that repeats the decision, such as "Sil", never "Tamam".
    Type
    string
    cancelLabel
    Description
    Label of the cancel action. Defaults to the ui.alertDialog.cancel library string ("Vazgeç" or "Cancel").
    Type
    string
    tone
    Description
    danger colours the confirm action for a destructive decision. Focus still starts on cancel.
    Type
    'neutral' | 'danger'
    Default
    'neutral'
    icon
    Description
    Decorative icon in a 40 px tile beside the title, tinted red when tone is danger, such as trash.
    Type
    IconName
    onConfirmRequired
    Description
    Runs the decision. Return a promise to keep the dialog open and busy until it settles: it closes when the promise resolves and stays open when it rejects, so show the error in the body.
    Type
    () => void | Promise<unknown>
    children
    Description
    Extra content under the description, such as the list of affected items.
    Type
    ReactNode
    trigger
    Description
    The element that opens the dialog, usually a Button. Leave it out to control the dialog with open.
    Type
    ReactElement
    open
    Description
    Controlled open state. Pass it with onOpenChange.
    Type
    boolean
    defaultOpen
    Description
    Open state on first render when the dialog is uncontrolled.
    Type
    boolean
    Default
    false
    onOpenChange
    Description
    Called with the new open state.
    Type
    (open: boolean) => void
    material
    Description
    'solid' keeps the dialog solid under a glass Provider, for example when children holds a long list.
    Type
    'auto' | 'solid'
    Default
    'auto'

    Data attributes

    Section titled “Data attributes”
    • data-component="alert-dialog", data-tone, data-size="sm": on the panel.
    • aria-busy="true": on the panel while the action runs.