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

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

# SheetFooter

**Type**: component

SheetFooter - Footer section for sheet actions A container for action buttons positioned at the bottom of the sheet content. Uses `mt-auto` to stick to the bottom and provides consistent spacing for buttons. Ideal for primary and secondary actions like Save/Cancel button pairs.

## JSX Usage

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

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

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling customization

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Footer content (typically action buttons)

## Examples

```tsx
// Standard save/cancel footer
<SheetFooter>
  <SheetClose asChild>
    <Button variant="outline">Cancel</Button>
  </SheetClose>
  <Button type="submit">Save Changes</Button>
</SheetFooter>
// Single action footer
<SheetFooter>
  <SheetClose asChild>
    <Button className="w-full">Done</Button>
  </SheetClose>
</SheetFooter>
// Custom layout with multiple action groups
<SheetFooter className="flex-row justify-between">
  <Button variant="ghost">Reset</Button>
  <div className="flex gap-2">
    <SheetClose asChild>
      <Button variant="outline">Cancel</Button>
    </SheetClose>
    <Button>Save</Button>
  </div>
</SheetFooter>
// Footer with destructive action
<SheetFooter>
  <Button variant="destructive">Delete Account</Button>
  <SheetClose asChild>
    <Button variant="outline">Keep Account</Button>
  </SheetClose>
</SheetFooter>
```