suiss/ui
  • Docs
  • Components
  • Patterns
  • Interactions
  • Charts
  • Blocks
GitHubGet started
DocsComponentsPatternsInteractionsChartsBlocks
Patterns19
  • Overview
  • Action Bar
  • Action Menu
  • App Shell
  • Command Palette
  • Confirm
  • Context Actions
  • Date Picker
  • Flyout
  • Modal
  • Navbar
  • Paged List
  • Panel
  • Picker
  • Preview
  • Search Picker
  • Segment Picker
  • Split View
  • Table List
  • Trail

suiss/ui · Pattern

Confirm

A confirmation prompt that opens as an alert dialog on desktop and an action sheet on mobile.

Confirm is an open-source pattern from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

import {
  Confirm,
  ConfirmAction,
  ConfirmCancel,
  ConfirmContent,
  ConfirmDescription,
  ConfirmFooter,
  ConfirmHeader,
  ConfirmTitle,
  ConfirmTrigger,
} from "@/components/patterns/confirm"
import { Button } from "@/components/ui/button"

export default function ConfirmDemo() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Confirm>
        <ConfirmTrigger render={<Button variant="outline" />}>
          Delete order
        </ConfirmTrigger>
        <ConfirmContent>
          <ConfirmHeader>
            <ConfirmTitle>Delete order?</ConfirmTitle>
            <ConfirmDescription>
              Order #1042 will be permanently deleted. This action cannot be
              undone.
            </ConfirmDescription>
          </ConfirmHeader>
          <ConfirmFooter>
            <ConfirmCancel>Cancel</ConfirmCancel>
            <ConfirmAction variant="destructive">Delete</ConfirmAction>
          </ConfirmFooter>
        </ConfirmContent>
      </Confirm>
    </div>
  )
}

Confirm asks the user to confirm or cancel an action. On desktop it renders an AlertDialog with a header and a footer of buttons. Below the 48rem breakpoint it renders an AlertSheet: ConfirmContent lifts the buttons out of ConfirmFooter, places the title, description and actions in one grouped card, and moves ConfirmCancel into its own button below the card.

Use it before destructive or irreversible actions, such as deleting a record, where the user must make an explicit choice.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/confirm

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add patterns confirm

Manual

  1. Add the pieces it builds on: Alert Dialog, Alert Sheet, use-mobile.

  2. Copy the source into components/patterns/confirm.tsx:

components/patterns/confirm.tsx
"use client"

import * as React from "react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  1. Update the import paths to match your project.

Usage

import { Confirm, ConfirmTrigger, ConfirmContent, ConfirmHeader, ConfirmFooter, ConfirmTitle, ConfirmDescription, ConfirmAction, ConfirmCancel } from "@/components/patterns/confirm"
<div className="flex min-h-svh items-center justify-center">
  <Confirm>
    <ConfirmTrigger render={<Button variant="outline" />}>
      Delete order
    </ConfirmTrigger>
    <ConfirmContent>
      <ConfirmHeader>
        <ConfirmTitle>Delete order?</ConfirmTitle>
        <ConfirmDescription>
          Order #1042 will be permanently deleted. This action cannot be
          undone.
        </ConfirmDescription>
      </ConfirmHeader>
      <ConfirmFooter>
        <ConfirmCancel>Cancel</ConfirmCancel>
        <ConfirmAction variant="destructive">Delete</ConfirmAction>
      </ConfirmFooter>
    </ConfirmContent>
  </Confirm>
</div>

Write the content once with the desktop structure: ConfirmHeader holding ConfirmTitle and ConfirmDescription, then ConfirmFooter holding ConfirmCancel and ConfirmAction. Keep ConfirmCancel and ConfirmAction as direct children of ConfirmFooter so the mobile layout can find them. Confirm accepts open, defaultOpen and onOpenChange for controlled or uncontrolled use. The mobile sheet is not dismissible by default; pass dismissible to let an outside press close it.

Examples

Dismissible

Sets dismissible so the mobile sheet also closes when the user presses outside it.

import {
  Confirm,
  ConfirmAction,
  ConfirmCancel,
  ConfirmContent,
  ConfirmDescription,
  ConfirmFooter,
  ConfirmHeader,
  ConfirmTitle,
  ConfirmTrigger,
} from "@/components/patterns/confirm"
import { Button } from "@/components/ui/button"

export default function ConfirmDismissible() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Confirm dismissible>
        <ConfirmTrigger render={<Button variant="outline" />}>
          Delete order
        </ConfirmTrigger>
        <ConfirmContent>
          <ConfirmHeader>
            <ConfirmTitle>Delete order?</ConfirmTitle>
            <ConfirmDescription>
              Order #1042 will be permanently deleted. This action cannot be
              undone.
            </ConfirmDescription>
          </ConfirmHeader>
          <ConfirmFooter>
            <ConfirmCancel>Cancel</ConfirmCancel>
            <ConfirmAction variant="destructive">Delete</ConfirmAction>
          </ConfirmFooter>
        </ConfirmContent>
      </Confirm>
    </div>
  )
}

API Reference

Anatomy9 parts
<Confirm>
<ConfirmTrigger />
<ConfirmContent>
<ConfirmHeader>
<ConfirmTitle />
<ConfirmDescription />
</ConfirmHeader>
<ConfirmFooter>
<ConfirmCancel />
<ConfirmAction />
</ConfirmFooter>
</ConfirmContent>
</Confirm>
01

Confirm

The root that renders an AlertDialog on desktop and an AlertSheet on mobile.

Also accepts the props of React.ComponentProps<typeof AlertSheet>.

02

ConfirmTrigger

The button that opens the confirmation.

Also accepts the props of React.ComponentProps<typeof AlertDialogTrigger>.

03

ConfirmContent

The popup; on mobile it regroups the footer buttons into the sheet layout.

Also accepts the props of React.ComponentProps<typeof AlertDialogContent>.

04

ConfirmHeader

Groups the title and description.

Also accepts the props of React.ComponentProps<"div">.

05

ConfirmFooter

Holds the cancel and action buttons on desktop; on mobile its buttons are moved into the sheet.

Also accepts the props of React.ComponentProps<"div">.

06

ConfirmTitle

The prompt's title, used as the dialog's accessible name.

Also accepts the props of React.ComponentProps<typeof AlertDialogTitle>.

07

ConfirmDescription

Supporting text, used as the dialog's accessible description.

Also accepts the props of React.ComponentProps<typeof AlertDialogDescription>.

08

ConfirmAction

A button that performs the action and closes the prompt.

Also accepts the props of React.ComponentProps<typeof AlertSheetAction>.

09

ConfirmCancel

A button that closes the prompt without acting; shown separately below the actions on mobile.

Also accepts the props of React.ComponentProps<typeof AlertSheetCancel>.

Accessibility

  • The popup has the alertdialog role, named by ConfirmTitle and described by ConfirmDescription. On mobile with dismissible set, it has the dialog role instead.
  • Opening moves focus into the dialog, and closing returns it to the trigger.
  • On desktop, pressing outside does not close the dialog; Escape, Cancel or an action does.

Notes

Parts carry data-slot values from confirm through confirm-cancel. Pass variant="destructive" to ConfirmAction for destructive actions. The size prop of ConfirmContent applies to the desktop AlertDialogContent only.

iOS
Confirm (open by default) on iOS in light modeConfirm (open by default) on iOS in dark mode
import { View } from "react-native"
import { Confirm, ConfirmAction, ConfirmCancel, ConfirmContent, ConfirmDescription, ConfirmFooter, ConfirmHeader, ConfirmTitle, ConfirmTrigger } from "@/components/patterns/confirm"
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"

function ConfirmDemo({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <View className="items-start">
      <Confirm defaultOpen={defaultOpen}>
        <ConfirmTrigger render={<Button variant="destructive" />}>
          <Text>Delete account</Text>
        </ConfirmTrigger>
        <ConfirmContent>
          <ConfirmHeader>
            <ConfirmTitle>Delete your account?</ConfirmTitle>
            <ConfirmDescription>
              This permanently deletes your account and all of its data.
            </ConfirmDescription>
          </ConfirmHeader>
          <ConfirmFooter>
            <ConfirmCancel>Cancel</ConfirmCancel>
            <ConfirmAction variant="destructive">Delete Account</ConfirmAction>
          </ConfirmFooter>
        </ConfirmContent>
      </Confirm>
    </View>
  )
}

export function ConfirmOpenByDefaultExample() {
  return (
    <ConfirmDemo defaultOpen />
  )
}
import EsuissUI
import SwiftUI

struct ConfirmOpenByDefaultExample: View {
  var body: some View {
    ConfirmDemo(open: true)
  }
}

struct ConfirmDemo: View {
  @State private var open: Bool

  init(open: Bool) {
    _open = State(initialValue: open)
  }

  var body: some View {
    Button("Delete account") { open = true }
      .buttonStyle(.variant(.destructive))
      .confirm(isPresented: $open) {
        ConfirmContent {
          ConfirmHeader {
            ConfirmTitle("Delete your account?")
            ConfirmDescription("This permanently deletes your account and all of its data.")
          }
          ConfirmFooter {
            ConfirmCancel("Cancel")
            ConfirmAction("Delete Account", variant: .destructive)
          }
        }
      }
  }
}
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import com.esuiss.ui.components.AlertSheetActionVariant
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.patterns.Confirm
import com.esuiss.ui.patterns.ConfirmAction
import com.esuiss.ui.patterns.ConfirmCancel
import com.esuiss.ui.patterns.ConfirmDescription
import com.esuiss.ui.patterns.ConfirmFooter
import com.esuiss.ui.patterns.ConfirmHeader
import com.esuiss.ui.patterns.ConfirmTitle

@Composable
fun ConfirmOpenByDefaultExample() {
    ConfirmDemo(defaultOpen = true)
}

@Composable
fun ConfirmDemo(defaultOpen: Boolean) {
    var open by rememberSaveable { mutableStateOf(defaultOpen) }
    Column {
        Button("Delete account", onClick = { open = true }, variant = ButtonVariant.Destructive)
        Confirm(open = open, onOpenChange = { open = it }) {
            ConfirmHeader {
                ConfirmTitle("Delete your account?")
                ConfirmDescription("This permanently deletes your account and all of its data.")
            }
            ConfirmFooter {
                ConfirmCancel("Cancel")
                ConfirmAction("Delete Account", onClick = {}, variant = AlertSheetActionVariant.Destructive)
            }
        }
    }
}

Confirm wraps AlertSheet with dismissible set to false by default, so the sheet closes only through one of its buttons.

ConfirmContent rearranges its children: the header and every non-cancel button from ConfirmFooter go into one rounded group, and ConfirmCancel is placed below it as a separate button. Use it before destructive or irreversible actions.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/confirm

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add confirm
$ pnpm dlx @esuiss/ui@latest add confirm --platform swift
$ pnpm dlx @esuiss/ui@latest add confirm --platform kotlin

The CLI also adds what it builds on: Alert Sheet.

Manual

  1. Install the dependencies:
npx expo install cn

  1. Add the pieces it builds on: Alert Sheet.

  2. Copy the source into components/patterns/confirm.tsx:

uniwind/components/patterns/confirm.tsx
import { cn } from "cn"
import * as React from "react"
import { View, type ViewProps } from "react-native"
import {
  AlertSheet,
  AlertSheetAction,
  AlertSheetCancel,
  AlertSheetContent,
  AlertSheetDescription,
  AlertSheetGroup,
  AlertSheetHeader,
  AlertSheetTitle,
  AlertSheetTrigger,
} from "@/components/ui/alert-sheet"

function Confirm({
  1. Update the import paths to match your project.
  1. Install the dependencies:
npx expo install cn

  1. Add the pieces it builds on: Alert Sheet.

  2. Copy the source into components/patterns/confirm.tsx:

nativewind/components/patterns/confirm.tsx
import { cn } from "cn"
import * as React from "react"
import { View, type ViewProps } from "react-native"
import {
  AlertSheet,
  AlertSheetAction,
  AlertSheetCancel,
  AlertSheetContent,
  AlertSheetDescription,
  AlertSheetGroup,
  AlertSheetHeader,
  AlertSheetTitle,
  AlertSheetTrigger,
} from "@/components/ui/alert-sheet"

function Confirm({
  1. Update the import paths to match your project.

  1. Add the pieces it builds on: Alert Sheet.

  2. Copy the source into components/patterns/confirm.tsx:

stylesheet/components/patterns/confirm.tsx
import * as React from "react"
import { View, type ViewProps } from "react-native"
import {
  AlertSheet,
  AlertSheetAction,
  AlertSheetCancel,
  AlertSheetContent,
  AlertSheetDescription,
  AlertSheetGroup,
  AlertSheetHeader,
  AlertSheetTitle,
  AlertSheetTrigger,
} from "@/components/ui/alert-sheet"

function Confirm({
  dismissible = false,
  1. Update the import paths to match your project.

  1. Target iOS 17 or later.

  2. Add the Swift package to your app:

Package.swift
.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")
  1. Copy the theme files every view uses:
swift/Theme/Theme.swift
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }
swift/Theme/Tokens.swift
import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))
  1. Copy the source and every file it uses:
swift/Patterns/Confirm.swift
import SwiftUI

extension View {
  public func confirm<Content: View>(
    isPresented: Binding<Bool>,
    dismissible: Bool = false,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(ConfirmPresenter(isPresented: isPresented, dismissible: dismissible, content: content))
  }
}

struct ConfirmPresenter<Body: View>: ViewModifier {
  @Binding var isPresented: Bool
  let dismissible: Bool
  @ViewBuilder let content: () -> Body
swift/Components/AlertDialog.swift
import SwiftUI

extension View {
  public func alertDialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: false, content: content)
      }
    )
  }
}

public struct AlertDialogContent<Content: View>: View {
swift/Components/AlertSheet.swift
import SwiftUI

extension View {
  public func alertSheet<Content: View>(
    isPresented: Binding<Bool>,
    dismissible: Bool = true,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(
        isPresented: isPresented,
        enter: .timingCurve(0.32, 0.72, 0, 1, duration: 0.3),
        exit: .timingCurve(0.32, 0.72, 0, 1, duration: 0.25)
      ) { visible in
        AlertSheetStage(visible: visible, dismissible: dismissible, content: content)
      }
swift/Components/Button.swift
import SwiftUI

public struct VariantButtonStyle: ButtonStyle {
  public enum Variant: CaseIterable, Sendable {
    case `default`, outline, secondary, tinted, ghost, plain, destructive, link
  }

  public enum Size: CaseIterable, Sendable {
    case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl

    var height: CGFloat {
      switch self {
      case .xs, .iconXs: 24
      case .sm, .iconSm: 32
      case .default, .icon: 36
      case .lg, .iconLg: 44
swift/Components/ButtonGroup.swift
import SwiftUI

extension EnvironmentValues {
  @Entry var buttonGroup: Axis? = nil
  @Entry var buttonGroupSize: CGSize = .zero
}

enum ButtonGroupSpace: Hashable {
  case group
}

struct ButtonGroupFrame {
  let bounds: Anchor<CGRect>
  let outlined: Bool
}
swift/Components/Dialog.swift
import SwiftUI

extension View {
  public func dialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: true, content: content)
      }
    )
  }
}

struct CenteredStage<Content: View>: View {
swift/Components/Overlay.swift
import PhosphorSwift
import Observation
import SwiftUI

public enum PopupAlignment: Sendable, CaseIterable {
  case start, center, end
}

struct OverlayDismiss: Sendable {
  let action: @MainActor @Sendable () -> Void

  @MainActor func callAsFunction() {
    action()
  }
}
swift/Components/TextVariant.swift
import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }
swift/Patterns/Adaptive.swift
import SwiftUI

extension EnvironmentValues {
  @Entry var patternCompact: Bool? = nil
}

@propertyWrapper
struct CompactLayout: DynamicProperty {
  @Environment(\.patternCompact) private var forced
  @Environment(\.horizontalSizeClass) private var sizeClass

  init() {}

  var wrappedValue: Bool {
    forced ?? (sizeClass != .regular)
  }
  1. Add the files to your app target.
  1. Set minSdk to 24 or higher and add the dependencies:
build.gradle.kts
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
implementation("com.adamglin:phosphor-icon-android:1.0.0")
  1. Copy the theme files every view uses:
kotlin/theme/Theme.kt
package com.esuiss.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset
kotlin/theme/Tokens.kt
package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,
    val primaryForeground: Color,
  1. Copy the source and every file it uses:
kotlin/patterns/Confirm.kt
package com.esuiss.ui.patterns

import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.setValue
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AlertSheet
import com.esuiss.ui.components.AlertSheetAction
kotlin/components/AlertSheet.kt
package com.esuiss.ui.components

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
kotlin/components/Button.kt
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
kotlin/components/ButtonGroup.kt
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Immutable
kotlin/components/Content.kt
package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }
kotlin/components/FormSupport.kt
package com.esuiss.ui.components

import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
kotlin/components/Icon.kt
package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Icon(
    imageVector: ImageVector,
kotlin/components/Overlay.kt
package com.esuiss.ui.components

import android.os.Build
import android.view.Window
import android.view.WindowManager
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.slideIn
  1. Update the com.esuiss.ui package names to match your project.

Usage

import { Confirm, ConfirmTrigger, ConfirmContent, ConfirmHeader, ConfirmFooter, ConfirmTitle, ConfirmDescription, ConfirmAction, ConfirmCancel } from "@/components/patterns/confirm"
<ConfirmDemo defaultOpen />

Put ConfirmTitle and ConfirmDescription in a ConfirmHeader, and the buttons in a ConfirmFooter inside ConfirmContent. Any ConfirmAction goes into the group; ConfirmCancel is moved out of it.

The root accepts open, defaultOpen and onOpenChange. Pass dismissible to let outside presses close it. Set variant="destructive" on ConfirmAction for delete-style actions.

Examples

Default

iOS
Confirm on iOS in light modeConfirm on iOS in dark mode
import { View } from "react-native"
import { Confirm, ConfirmAction, ConfirmCancel, ConfirmContent, ConfirmDescription, ConfirmFooter, ConfirmHeader, ConfirmTitle, ConfirmTrigger } from "@/components/patterns/confirm"
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"

function ConfirmDemo({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <View className="items-start">
      <Confirm defaultOpen={defaultOpen}>
        <ConfirmTrigger render={<Button variant="destructive" />}>
          <Text>Delete account</Text>
        </ConfirmTrigger>
        <ConfirmContent>
          <ConfirmHeader>
            <ConfirmTitle>Delete your account?</ConfirmTitle>
            <ConfirmDescription>
              This permanently deletes your account and all of its data.
            </ConfirmDescription>
          </ConfirmHeader>
          <ConfirmFooter>
            <ConfirmCancel>Cancel</ConfirmCancel>
            <ConfirmAction variant="destructive">Delete Account</ConfirmAction>
          </ConfirmFooter>
        </ConfirmContent>
      </Confirm>
    </View>
  )
}

export function ConfirmExample() {
  return (
    <ConfirmDemo />
  )
}
import EsuissUI
import SwiftUI

struct ConfirmExample: View {
  var body: some View {
    ConfirmDemo(open: false)
  }
}

struct ConfirmDemo: View {
  @State private var open: Bool

  init(open: Bool) {
    _open = State(initialValue: open)
  }

  var body: some View {
    Button("Delete account") { open = true }
      .buttonStyle(.variant(.destructive))
      .confirm(isPresented: $open) {
        ConfirmContent {
          ConfirmHeader {
            ConfirmTitle("Delete your account?")
            ConfirmDescription("This permanently deletes your account and all of its data.")
          }
          ConfirmFooter {
            ConfirmCancel("Cancel")
            ConfirmAction("Delete Account", variant: .destructive)
          }
        }
      }
  }
}
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import com.esuiss.ui.components.AlertSheetActionVariant
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.patterns.Confirm
import com.esuiss.ui.patterns.ConfirmAction
import com.esuiss.ui.patterns.ConfirmCancel
import com.esuiss.ui.patterns.ConfirmDescription
import com.esuiss.ui.patterns.ConfirmFooter
import com.esuiss.ui.patterns.ConfirmHeader
import com.esuiss.ui.patterns.ConfirmTitle

@Composable
fun ConfirmExample() {
    ConfirmDemo(defaultOpen = false)
}

@Composable
fun ConfirmDemo(defaultOpen: Boolean) {
    var open by rememberSaveable { mutableStateOf(defaultOpen) }
    Column {
        Button("Delete account", onClick = { open = true }, variant = ButtonVariant.Destructive)
        Confirm(open = open, onOpenChange = { open = it }) {
            ConfirmHeader {
                ConfirmTitle("Delete your account?")
                ConfirmDescription("This permanently deletes your account and all of its data.")
            }
            ConfirmFooter {
                ConfirmCancel("Cancel")
                ConfirmAction("Delete Account", onClick = {}, variant = AlertSheetActionVariant.Destructive)
            }
        }
    }
}

API Reference

01

Confirm

The root that owns the open state.

Also accepts the props of React.ComponentProps<typeof AlertSheet>.

02

ConfirmTrigger

The element that opens the sheet.

Also accepts the props of React.ComponentProps<typeof AlertSheetTrigger>.

03

ConfirmContent

The sheet that groups the header and actions and places Cancel below.

Also accepts the props of React.ComponentProps<typeof AlertSheetContent>.

04

ConfirmHeader

Holds the title and description.

Also accepts the props of React.ComponentProps<typeof AlertSheetHeader>.

05

ConfirmFooter

Holds the action and cancel buttons.

Also accepts the props of ViewProps.

06

ConfirmTitle

The question being asked.

Also accepts the props of React.ComponentProps<typeof AlertSheetTitle>.

07

ConfirmDescription

Supporting text about the consequences.

Also accepts the props of React.ComponentProps<typeof AlertSheetDescription>.

08

ConfirmAction

A confirming action, rendered as an AlertSheetAction.

Also accepts the props of React.ComponentProps<typeof AlertSheetAction>.

09

ConfirmCancel

The cancel button, shown separately below the group.

Also accepts the props of React.ComponentProps<typeof AlertSheetCancel>.

Accessibility

  • With the default dismissible={false}, the sheet uses the alert dialog primitive, so it closes only through its buttons.

Notes

  • Action text uses text-primary, or text-destructive for the destructive variant.
  • On iOS the sheet renders in a full-window overlay so it appears above native screens.
NextContext ActionsPreviousCommand Palette

On this page

  1. 01Installation
    • CLI
    • Manual
  2. 02Usage
  3. 03Examples
    • Dismissible
  4. 04API Reference
    • Confirm
    • ConfirmTrigger
    • ConfirmContent
    • ConfirmHeader
    • ConfirmFooter
    • ConfirmTitle
    • ConfirmDescription
    • ConfirmAction
    • ConfirmCancel
  5. 05Accessibility
  6. 06Notes
  7. 07Installation
    • Manual
  8. 08Usage
  9. 09Examples
    • Default
  10. 10API Reference
    • Confirm
    • ConfirmTrigger
    • ConfirmContent
    • ConfirmHeader
    • ConfirmFooter
    • ConfirmTitle
    • ConfirmDescription
    • ConfirmAction
    • ConfirmCancel
  11. 11Accessibility
  12. 12Notes