Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@radix-ui/react-alert-dialog

Package Overview
Dependencies
Maintainers
6
Versions
238
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@radix-ui/react-alert-dialog

  • 1.0.4-rc.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1M
increased by8.26%
Maintainers
6
Weekly downloads
 
Created

What is @radix-ui/react-alert-dialog?

@radix-ui/react-alert-dialog is a React component library that provides accessible and customizable alert dialogs. These dialogs are used to interrupt the user with important information and require a response before they can proceed.

What are @radix-ui/react-alert-dialog's main functionalities?

Basic Alert Dialog

This code demonstrates a basic alert dialog with a trigger button, a title, a description, and action buttons for confirming or canceling the action.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';

function BasicAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Open Alert</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
        <AlertDialogAction>Confirm</AlertDialogAction>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Custom Styling

This code demonstrates how to apply custom styles to the alert dialog components using CSS classes.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';
import './customStyles.css';

function CustomStyledAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className="custom-trigger">Open Custom Alert</AlertDialogTrigger>
      <AlertDialogContent className="custom-content">
        <AlertDialogTitle className="custom-title">Custom Styled Alert</AlertDialogTitle>
        <AlertDialogDescription className="custom-description">This alert has custom styles.</AlertDialogDescription>
        <AlertDialogAction className="custom-action">Confirm</AlertDialogAction>
        <AlertDialogCancel className="custom-cancel">Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Controlled Alert Dialog

This code demonstrates a controlled alert dialog where the open state is managed by React state.

import { useState } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';

function ControlledAlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger onClick={() => setOpen(true)}>Open Controlled Alert</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Controlled Alert</AlertDialogTitle>
        <AlertDialogDescription>This alert is controlled by state.</AlertDialogDescription>
        <AlertDialogAction onClick={() => setOpen(false)}>Confirm</AlertDialogAction>
        <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Other packages similar to @radix-ui/react-alert-dialog

FAQs

Package last updated on 19 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc