Overlays

Action Sheet

iOS-style sheet of actions — destructive actions styled automatically.

Action Sheet

An iOS-style sheet of actions, perfect for context-specific menus on mobile devices.

'use client'

import { useState } from 'react'
import { ActionSheet, ActionSheetAction, Button } from 'biibaos'
import { Download, Link as LinkIcon, Star, Trash } from 'lucide-react'

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  const actions: ActionSheetAction[] = [
    { label: 'Save Image', icon: <Download size={16} />, onClick: () => alert('Saved') },
    { label: 'Copy Link', icon: <LinkIcon size={16} />, onClick: () => alert('Copied') },
    { label: 'Add to Favorites', icon: <Star size={16} />, onClick: () => alert('Added') },
    { label: 'Delete Photo', icon: <Trash size={16} />, destructive: true, onClick: () => alert('Deleted') }
  ]

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Action Sheet</Button>
      
      <ActionSheet 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Photo Options"
        description="Select an action to perform on this photo."
        actions={actions}
        cancelLabel="Cancel"
      />
    </>
  )
}

Properties

PropTypeDefaultDescription
isOpenbooleanControlled state of overlay visibility
onClose() => voidCallback function triggered when closing the overlay
titleReact.ReactNodeOptional title at the top of the sheet
descriptionReact.ReactNodeOptional description below the title
actionsActionSheetAction[]List of actions to display
cancelLabelReact.ReactNode"Cancel"Label for the bottom cancel button