From 3496b2d5414065ca797611cc4c24ad20c222fa5f Mon Sep 17 00:00:00 2001
From: Alex <me@hywax.space>
Date: Wed, 27 Nov 2024 18:28:19 +0500
Subject: [PATCH] docs(content): consistent callouts links style (#2786)

---
 docs/content/1.getting-started/3.theme.md    | 4 ++--
 docs/content/2.composables/use-toast.md      | 2 +-
 docs/content/3.components/calendar.md        | 2 +-
 docs/content/3.components/chip.md            | 2 +-
 docs/content/3.components/collapsible.md     | 2 +-
 docs/content/3.components/command-palette.md | 4 ++--
 docs/content/3.components/drawer.md          | 2 +-
 docs/content/3.components/dropdown-menu.md   | 2 +-
 docs/content/3.components/form.md            | 2 +-
 docs/content/3.components/input-menu.md      | 8 ++++----
 docs/content/3.components/input-number.md    | 2 +-
 docs/content/3.components/link.md            | 2 +-
 docs/content/3.components/modal.md           | 4 ++--
 docs/content/3.components/navigation-menu.md | 2 +-
 docs/content/3.components/pagination.md      | 2 +-
 docs/content/3.components/popover.md         | 4 ++--
 docs/content/3.components/select-menu.md     | 8 ++++----
 docs/content/3.components/select.md          | 2 +-
 docs/content/3.components/slideover.md       | 4 ++--
 docs/content/3.components/table.md           | 2 +-
 docs/content/3.components/toast.md           | 2 +-
 docs/content/3.components/tooltip.md         | 6 +++---
 22 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index c3e528791a..32dbe3f3b8 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -570,14 +570,14 @@ These default values can be customized in your [`vite.config.ts`](#config) to ad
 You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
 
 ::note
-Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
+Tailwind Variants uses [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
 ::
 
 ::tip
 You can explore the theme for each component in two ways:
 
 - Check the `Theme` section in the documentation of each individual component.
-- Browse the source code directly in the GitHub repository at https://github.com/nuxt/ui/tree/v3/src/theme.
+- Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme).
 ::
 
 ### Config
diff --git a/docs/content/2.composables/use-toast.md b/docs/content/2.composables/use-toast.md
index b9c0a35353..14e611f0f5 100644
--- a/docs/content/2.composables/use-toast.md
+++ b/docs/content/2.composables/use-toast.md
@@ -18,7 +18,7 @@ const toast = useToast()
 - When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/toast"}
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
index 4fe8843bc5..652ebb0a95 100644
--- a/docs/content/3.components/calendar.md
+++ b/docs/content/3.components/calendar.md
@@ -12,7 +12,7 @@ navigation.badge: New
 ---
 
 ::note
-This component relies on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
+This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
 ::
 
 ## Usage
diff --git a/docs/content/3.components/chip.md b/docs/content/3.components/chip.md
index 00694218b3..181de1db39 100644
--- a/docs/content/3.components/chip.md
+++ b/docs/content/3.components/chip.md
@@ -120,7 +120,7 @@ props:
 ::
 
 ::note
-It's used this way in the [CommandPalette](/components/command-palette), [InputMenu](/components/input-menu), [Select](/components/select) or [SelectMenu](/components/select-menu) components for example.
+It's used this way in the [`CommandPalette`](/components/command-palette), [`InputMenu`](/components/input-menu), [`Select`](/components/select) or [`SelectMenu`](/components/select-menu) components for example.
 ::
 
 ## Examples
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index abe5745f63..bf18057545 100644
--- a/docs/content/3.components/collapsible.md
+++ b/docs/content/3.components/collapsible.md
@@ -79,7 +79,7 @@ name: 'collapsible-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
 ::
 
 ::tip
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index 4ed5252a53..212d8fd0ab 100644
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -491,7 +491,7 @@ class: '!p-0'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With post-filtered items
@@ -585,7 +585,7 @@ name: 'command-palette-open-example'
 ::
 
 ::note
-This can be useful when using the CommandPalette inside a [Modal](/components/modal) for example.
+This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
 ::
 
 ### With custom slot
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index 48d28acd25..61652f648f 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -259,7 +259,7 @@ name: 'drawer-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
 ::
 
 ::tip
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index 4c37c9c290..e9767e22b4 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -301,7 +301,7 @@ name: 'dropdown-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
 ::
 
 ### With custom slot
diff --git a/docs/content/3.components/form.md b/docs/content/3.components/form.md
index 23582a761f..a4e13c2508 100644
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -117,7 +117,7 @@ options:
 ::
 
 ::tip
-You can use the [useFormField](/composables/use-form-field) composable to implement this inside your own components.
+You can use the [`useFormField`](/composables/use-form-field) composable to implement this inside your own components.
 ::
 
 ### Error Event
diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md
index 37e3d88287..c053732f72 100644
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -15,11 +15,11 @@ links:
 Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
 
 ::tip
-Use this over an [Input](/components/input) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
+Use this over an [`Input`](/components/input) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
 ::
 
 ::note
-This component is similar to the [SelectMenu](/components/select-menu) but it's using an Input instead of a Select.
+This component is similar to the [`SelectMenu`](/components/select-menu) but it's using an Input instead of a Select.
 ::
 
 ### Items
@@ -701,7 +701,7 @@ name: 'input-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
 ::
 
 ### Control open state on focus
@@ -757,7 +757,7 @@ name: 'input-menu-filter-example'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With custom search
diff --git a/docs/content/3.components/input-number.md b/docs/content/3.components/input-number.md
index 65f5837b5c..5e1e1d2bdd 100644
--- a/docs/content/3.components/input-number.md
+++ b/docs/content/3.components/input-number.md
@@ -12,7 +12,7 @@ navigation.badge: New
 ---
 
 ::note
-This component relies on the [@internationalized/number](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
+This component relies on the [`@internationalized/number`](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
 ::
 
 ## Usage
diff --git a/docs/content/3.components/link.md b/docs/content/3.components/link.md
index 28243663a7..e522e664f4 100644
--- a/docs/content/3.components/link.md
+++ b/docs/content/3.components/link.md
@@ -18,7 +18,7 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 
 ::note
-It is used by the [Breadcrumb](/components/breadcrumb), [Button](/components/button), [ContextMenu](/components/context-menu), [DropdownMenu](/components/dropdown-menu) and [NavigationMenu](/components/navigation-menu) components.
+It is used by the [`Breadcrumb`](/components/breadcrumb), [`Button`](/components/button), [`ContextMenu`](/components/context-menu), [`DropdownMenu`](/components/dropdown-menu) and [`NavigationMenu`](/components/navigation-menu) components.
 ::
 
 ### Tag
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index 8e73101fc6..2e3891ef39 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -295,7 +295,7 @@ name: 'modal-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
 ::
 
 ::tip
@@ -307,7 +307,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
 You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`ModalProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
 ::
 
 First, create a modal component that will be opened programatically:
diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md
index 935d61502b..20e994ebfd 100644
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -552,7 +552,7 @@ name: 'navigation-menu-model-value-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
 ::
 
 ::tip
diff --git a/docs/content/3.components/pagination.md b/docs/content/3.components/pagination.md
index 8c13b94b7e..10b69b1e50 100644
--- a/docs/content/3.components/pagination.md
+++ b/docs/content/3.components/pagination.md
@@ -14,7 +14,7 @@ links:
 Use the `default-page` prop or the `v-model:page` directive to control the current page.
 
 ::note
-The Pagination component uses some [Button](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
+The Pagination component uses some [`Button`](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
 ::
 
 ### Total
diff --git a/docs/content/3.components/popover.md b/docs/content/3.components/popover.md
index 00c1c255d5..82ef673ed2 100644
--- a/docs/content/3.components/popover.md
+++ b/docs/content/3.components/popover.md
@@ -64,7 +64,7 @@ slots:
 ::
 
 ::note
-When using the `hover` mode, the Radix Vue [HoverCard](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [Popover](https://www.radix-vue.com/components/popover.html).
+When using the `hover` mode, the Radix Vue [`HoverCard`](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [`Popover`](https://www.radix-vue.com/components/popover.html).
 ::
 
 ### Delay
@@ -174,7 +174,7 @@ name: 'popover-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
 ::
 
 ### With command palette
diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md
index 3430b5a9d9..592cd7d3fb 100644
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -15,11 +15,11 @@ links:
 Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
 
 ::tip
-Use this over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
+Use this over a [`Select`](/components/select) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
 ::
 
 ::note
-This component is similar to the [InputMenu](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
+This component is similar to the [`InputMenu`](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
 ::
 
 ### Items
@@ -746,7 +746,7 @@ name: 'select-menu-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
 ::
 
 ### Control search term
@@ -792,7 +792,7 @@ name: 'select-menu-filter-example'
 ::
 
 ::note
-This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
 ::
 
 ### With custom search
diff --git a/docs/content/3.components/select.md b/docs/content/3.components/select.md
index f4ffb08407..cdd7943c00 100644
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -650,7 +650,7 @@ name: 'select-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
 ::
 
 ### With rotating icon
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index 06c3717901..90f4135c5d 100644
--- a/docs/content/3.components/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -294,7 +294,7 @@ name: 'slideover-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
 ::
 
 ::tip
@@ -306,7 +306,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
 You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`SlideoverProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
 ::
 
 First, create a slideover component that will be opened programatically:
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 9348706e82..98f972b510 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -245,7 +245,7 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 ::
 
 ::note
-You could also add this action to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
+You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::
 
 ### With row selection
diff --git a/docs/content/3.components/toast.md b/docs/content/3.components/toast.md
index 2231dd628d..3ffa81656d 100644
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -14,7 +14,7 @@ links:
 Use the [useToast](/composables/use-toast) composable to display a toast in your application.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}
diff --git a/docs/content/3.components/tooltip.md b/docs/content/3.components/tooltip.md
index b666234e1a..bb8b3c9835 100644
--- a/docs/content/3.components/tooltip.md
+++ b/docs/content/3.components/tooltip.md
@@ -14,7 +14,7 @@ links:
 Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
 
 ::warning
-Make sure to wrap your app with the [App](/components/app) component which uses the [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`TooltipProvider`](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}
@@ -89,7 +89,7 @@ slots:
 ::
 
 ::tip
-This can be configured globally through the `tooltip.delayDuration` option in the [App](/components/app) component.
+This can be configured globally through the `tooltip.delayDuration` option in the [`App`](/components/app) component.
 ::
 
 ### Content
@@ -182,7 +182,7 @@ name: 'tooltip-open-example'
 ::
 
 ::note
-In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
+In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
 ::
 
 ## API