Allow Access Modal

Permission request modal for accessing user data or services. Perfect for requesting permissions, API access, or data sharing consent.

Features

Permission request with clear explanation
Allow and deny action buttons
List of requested permissions
Security and privacy information
Accessible permission descriptions
Customizable permission list

Example

Request Access

Click the button below to see the permission request modal. Users can review permissions and choose to allow or deny access.

Usage

import { AllowAccessModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Request Access
      </Button>
      
      <AllowAccessModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onAllow={() => {
          console.log('Access granted!')
          setIsOpen(false)
        }}
        onDeny={() => {
          console.log('Access denied')
          setIsOpen(false)
        }}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onAllow	() => void	-	Callback when access is granted
onDeny	() => void	-	Callback when access is denied
permissions	AllowAccessPermission[]	default permissions	List of permissions to request