@neynar/ui/llm-docs/drawer-footer.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# DrawerFooter

**Type**: component

DrawerFooter - Footer section for action buttons and controls Standardized footer area positioned at the bottom of the drawer with automatic top margin to push content down. Typically contains primary actions, secondary actions, and DrawerClose triggers. Uses flexbox column layout with consistent spacing between elements.

## JSX Usage

```jsx
import { DrawerFooter } from '@neynar/ui';

<DrawerFooter
  className="value"
>
  {/* Your content here */}
</DrawerFooter>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Standard footer with primary and secondary actions
<DrawerFooter>
  <Button>Save Changes</Button>
  <DrawerClose asChild>
    <Button variant="outline">Cancel</Button>
  </DrawerClose>
</DrawerFooter>
```
### Example 2
```tsx
// Footer with multiple action groups
<DrawerFooter>
  <div className="flex gap-2">
    <Button className="flex-1">Save</Button>
    <Button variant="outline" className="flex-1">Save as Draft</Button>
  </div>
  <DrawerClose asChild>
    <Button variant="ghost" size="sm">Cancel</Button>
  </DrawerClose>
</DrawerFooter>
```
### Example 3
```tsx
// Footer with text and actions
<DrawerFooter>
  <p className="text-sm text-muted-foreground text-center">
    Changes will be saved automatically
  </p>
  <DrawerClose asChild>
    <Button>Done</Button>
  </DrawerClose>
</DrawerFooter>
```