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)
This is a default callout with some information.
<template>
<Callout>
This is a default callout with some information.
</Callout>
</template>Usage
<script setup lang="ts">
import { Callout } from '@/components/content/Callout'
</script>
<template>
<Callout type="info">
This is an info callout.
</Callout>
</template>Examples
Default
This is a default callout with some information.
<template>
<Callout>
This is a default callout with some information.
</Callout>
</template>Info
This is an info callout with important information.
<template>
<Callout type="info">
This is an info callout with important information.
</Callout>
</template>Warning
This is a warning callout. Be careful with this information.
<template>
<Callout type="warning">
This is a warning callout. Be careful with this information.
</Callout>
</template>Error
This is an error callout. Something went wrong.
<template>
<Callout type="error">
This is an error callout. Something went wrong.
</Callout>
</template>Success
This is a success callout. Operation completed successfully!
<template>
<Callout type="success">
This is a success callout. Operation completed successfully!
</Callout>
</template>Note
This is a note callout with additional information.
<template>
<Callout type="note">
This is a note callout with additional information.
</Callout>
</template>Tip
This is a tip callout with helpful advice.
<template>
<Callout type="tip">
This is a tip callout with helpful advice.
</Callout>
</template>Danger
This is a danger callout. Proceed with caution!
<template>
<Callout type="danger">
This is a danger callout. Proceed with caution!
</Callout>
</template>With Title
You can add a title to make important information stand out:
Important Notice
This callout has a title. You can use titles to make important information stand out.
<template>
<Callout type="info" title="Important Notice">
This callout has a title. You can use titles to make important information stand out.
</Callout>
</template><template>
<Callout type="info" title="Important Notice">
This callout has a title.
</Callout>
</template>Without Icon
You can disable the icon by setting the icon prop to false:
This callout has the icon disabled.
<template>
<Callout type="info" :icon="false">
This callout has the icon disabled.
</Callout>
</template><template>
<Callout type="info" :icon="false">
This callout has no icon.
</Callout>
</template>API Reference
Callout
The Callout component is used to display important information, warnings, tips, and alerts in your documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "default" | "info" | "warning" | "error" | "success" | "note" | "tip" | "danger" | "default" | The type of callout, which determines styling |
title | string | undefined | Optional title displayed above the content |
icon | boolean | true | Whether to show the icon |
class | HTMLAttributes["class"] | undefined | Custom CSS classes |