suiss/uim · Pattern
Confirm
A bottom alert sheet that asks the user to confirm or cancel an action.
Confirm is an open-source mobile pattern from suiss/uim: components composed into a flow for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.
iOS
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 @esuiss/uim@latest add confirm$ pnpm dlx @esuiss/uim@latest add confirm --platform swift$ pnpm dlx @esuiss/uim@latest add confirm --platform kotlinThe CLI also adds what it builds on: Alert Sheet.
Manual
- Install the dependencies:
npx expo install cn-
Add the pieces it builds on: Alert Sheet.
-
Copy the source into
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({- Update the import paths to match your project.
- Install the dependencies:
npx expo install cn-
Add the pieces it builds on: Alert Sheet.
-
Copy the source into
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({- Update the import paths to match your project.
-
Add the pieces it builds on: Alert Sheet.
-
Copy the source into
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,- Update the import paths to match your project.
-
Target iOS 17 or later.
-
Add the Swift package to your app:
.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")- Copy the theme files every view uses:
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
}import SwiftUI
extension Color {
public static let surface = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
public static let surfaceSecondary = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
public static let surfaceTertiary = Color.adaptive(light: .init(0xE8E8ED), dark: .init(0x2C2C2E))
public static let surfaceRaised = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
public static let label = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
public static let labelSecondary = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
public static let labelTertiary = Color.adaptive(light: .init(0x86868B), dark: .init(0x86868B))
public static let labelQuaternary = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
public static let control = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
public static let controlPressed = Color.adaptive(light: .init(0x000000, 0.12), dark: .init(0xFFFFFF, 0.22))
public static let controlSelected = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
public static let controlDisabled = Color.adaptive(light: .init(0x000000, 0.03), dark: .init(0xFFFFFF, 0.05))
public static let onControlSelected = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))- Copy the source and every file it uses:
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: () -> Bodyimport 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 {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)
}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: 44import 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
}import PhosphorSwift
import SwiftUI
extension Shadow {
static let control = Shadow(color: .black.opacity(0.08), radius: 0.5, y: 0.5)
static let thumb = Shadow(color: .black.opacity(0.12), radius: 1.5, y: 1)
}
struct SelectionIndicator<Mark: View>: View {
let checked: Bool
let pressed: Bool
let cornerRadius: CGFloat
let mark: Mark
@Environment(\.isEnabled) private var isEnabled
@Environment(\.isInvalid) private var invalidimport 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 {import SwiftUI
extension EnvironmentValues {
@Entry public var isInvalid = false
@Entry var fieldInset = false
@Entry var fieldGroupInset = false
@Entry var fieldSetInset = false
}
extension View {
public func invalid(_ isInvalid: Bool = true) -> some View {
environment(\.isInvalid, isInvalid)
}
}
public enum FieldOrientation: CaseIterable, Sendable {import SwiftUI
extension EnvironmentValues {
@Entry public var hapticsEnabled = true
}
extension View {
public func haptics(_ enabled: Bool) -> some View {
environment(\.hapticsEnabled, enabled)
}
func hapticFeedback<Trigger: Equatable>(_ feedback: SensoryFeedback, trigger: Trigger) -> some View {
modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger) { _, _ in true })
}
func hapticFeedback<Trigger: Equatable>(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()
}
}import SwiftUI
public struct Separator: View {
let orientation: Axis
public init(_ orientation: Axis = .horizontal) {
self.orientation = orientation
}
public var body: some View {
Rectangle()
.fill(Color.separator)
.frame(width: orientation == .vertical ? 1 : nil, height: orientation == .horizontal ? 1 : nil)
.frame(maxWidth: orientation == .horizontal ? .infinity : nil, maxHeight: orientation == .vertical ? .infinity : nil)
.accessibilityHidden(true)
}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
}
}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)
}- Add the files to your app target.
- Set
minSdkto 24 or higher and add the dependencies:
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")- Copy the theme files every view uses:
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.DpOffsetpackage 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 surface: Color,
val surfaceSecondary: Color,
val surfaceTertiary: Color,
val surfaceRaised: Color,
val label: Color,
val labelSecondary: Color,
val labelTertiary: Color,
val labelQuaternary: Color,- Copy the source and every file it uses:
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.AlertSheetActionpackage 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.Boxpackage 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.RoundedCornerShapepackage 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.Immutablepackage 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 }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.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Sizepackage 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,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- Update the
com.esuiss.uipackage 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
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
Confirm
The root that owns the open state.
Extends
React.ComponentProps<typeof AlertSheet>ConfirmTrigger
The element that opens the sheet.
Extends
React.ComponentProps<typeof AlertSheetTrigger>ConfirmContent
The sheet that groups the header and actions and places Cancel below.
Extends
React.ComponentProps<typeof AlertSheetContent>ConfirmHeader
Holds the title and description.
Extends
React.ComponentProps<typeof AlertSheetHeader>ConfirmFooter
Holds the action and cancel buttons.
Extends
ViewPropsConfirmTitle
The question being asked.
Extends
React.ComponentProps<typeof AlertSheetTitle>ConfirmDescription
Supporting text about the consequences.
Extends
React.ComponentProps<typeof AlertSheetDescription>ConfirmAction
A confirming action, rendered as an AlertSheetAction.
Extends
React.ComponentProps<typeof AlertSheetAction>ConfirmCancel
The cancel button, shown separately below the group.
Extends
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-link, ortext-dangerfor thedestructivevariant. - On iOS the sheet renders in a full-window overlay so it appears above native screens.