Sections
Getting Started
Components
- DocTabs
- Callout
- ComponentPreview
- CommandMenu
- CopyButton
- DocsSidebar
- DocsTableOfContents
- PageHeader
- SiteHeader
- CopyCodeButton
- DocsCopyPage
- CodeBlockCommand
- CommandMenuItem
- CommandMenuKbd
- GitHubLink
- LucideIcon
- MainNav
- MobileNav
- ModeSwitcher
- PageHeaderDescription
- PageHeaderHeading
- SiteBody
- SiteConfig
- SiteFooter
- OgImage (Custom)
The CopyCodeButton component provides a responsive way to copy code, showing a drawer on mobile and a dialog on desktop.
Usage
<script setup lang="ts">
import { CopyCodeButton } from '@/components/CopyCodeButton'
</script>
<template>
<CopyCodeButton />
</template>Features
- Responsive: Drawer on mobile, dialog on desktop
- Theme-aware: Displays current theme configuration
- Customizable: Supports different button sizes
API Reference
CopyCodeButton
| Prop | Type | Default | Description |
|---|---|---|---|
class | HTMLAttributes["class"] | undefined | Custom CSS classes |
size | ButtonVariants["size"] | undefined | Button size variant |
Behavior
- Mobile: Opens a drawer from the bottom
- Desktop: Opens a dialog modal
- Shows theme customization code
- Uses
useConfig()to get current theme settings