From d54034bdbd1d90256022219e6cf5ccbfd37081bd Mon Sep 17 00:00:00 2001
From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 11:10:03 +0330
Subject: [PATCH] Update info callout titles

---
 WRITING.md                                    |  2 +-
 src/routes/concepts/components/basics.mdx     |  4 +--
 .../concepts/components/class-style.mdx       |  2 +-
 .../concepts/components/event-handlers.mdx    |  2 +-
 src/routes/concepts/context.mdx               |  2 +-
 src/routes/concepts/control-flow/portal.mdx   |  2 +-
 src/routes/concepts/effects.mdx               |  2 +-
 src/routes/concepts/refs.mdx                  |  4 +--
 src/routes/concepts/signals.mdx               |  4 +--
 src/routes/concepts/stores.mdx                |  6 ++---
 src/routes/concepts/understanding-jsx.mdx     |  4 +--
 .../configuration/environment-variables.mdx   |  2 +-
 src/routes/configuration/typescript.mdx       | 10 ++++----
 .../guides/complex-state-management.mdx       |  2 +-
 src/routes/guides/routing-and-navigation.mdx  |  2 +-
 src/routes/guides/state-management.mdx        |  2 +-
 .../guides/styling-components/tailwind.mdx    |  2 +-
 src/routes/guides/testing.mdx                 |  2 +-
 src/routes/pt-br/quick-start.mdx              |  2 +-
 src/routes/pt-br/solid-router/quick-start.mdx |  2 +-
 src/routes/quick-start.mdx                    |  2 +-
 .../basic-reactivity/create-signal.mdx        |  8 +++---
 .../reference/components/no-hydration.mdx     |  2 +-
 src/routes/reference/components/suspense.mdx  |  2 +-
 src/routes/reference/jsx-attributes/attr.mdx  |  2 +-
 src/routes/reference/jsx-attributes/bool.mdx  |  2 +-
 .../reference/jsx-attributes/classlist.mdx    |  4 +--
 src/routes/reference/jsx-attributes/on.mdx    |  2 +-
 src/routes/reference/jsx-attributes/prop.mdx  |  4 +--
 .../reactive-utilities/catch-error.mdx        |  2 +-
 .../reference/reactive-utilities/on-util.mdx  |  2 +-
 .../reference/rendering/render-to-stream.mdx  |  2 +-
 .../server-utilities/get-request-event.mdx    |  2 +-
 .../store-utilities/create-mutable.mdx        |  2 +-
 .../installation-and-setup.mdx                |  2 +-
 .../solid-router/concepts/dynamic-routes.mdx  |  2 +-
 .../solid-router/concepts/path-parameters.mdx |  2 +-
 .../concepts/search-parameters.mdx            |  2 +-
 .../solid-router/getting-started/config.mdx   |  2 +-
 src/routes/solid-router/index.mdx             |  2 +-
 .../solid-router/reference/components/a.mdx   |  2 +-
 .../reference/components/route.mdx            |  2 +-
 .../reference/data-apis/cache.mdx             |  2 +-
 .../reference/data-apis/query.mdx             |  2 +-
 .../reference/data-apis/use-action.mdx        |  2 +-
 .../reference/data-apis/use-submission.mdx    |  2 +-
 .../reference/data-apis/use-submissions.mdx   |  2 +-
 .../reference/primitives/use-navigate.mdx     |  2 +-
 .../building-your-application/api-routes.mdx  |  2 +-
 src/routes/solid-start/getting-started.mdx    |  2 +-
 .../solid-start/guides/data-fetching.mdx      |  4 +--
 .../solid-start/guides/data-mutation.mdx      |  2 +-
 .../reference/server/create-middleware.mdx    |  2 +-
 src/solidbase-theme/mdx-components.tsx        | 12 ++++++---
 src/ui/callout.tsx                            | 25 +++++++++----------
 55 files changed, 89 insertions(+), 86 deletions(-)

diff --git a/WRITING.md b/WRITING.md
index e31df890b4..f1e371efc5 100644
--- a/WRITING.md
+++ b/WRITING.md
@@ -66,7 +66,7 @@ We ask that you use them sparingly.
 3. Once you have the Aside component imported, simply follow the below example for how to add one to your document.
 
 ```
-:::info
+:::note
     content here
 :::
 ```
diff --git a/src/routes/concepts/components/basics.mdx b/src/routes/concepts/components/basics.mdx
index fd4d002d64..570f481082 100644
--- a/src/routes/concepts/components/basics.mdx
+++ b/src/routes/concepts/components/basics.mdx
@@ -27,7 +27,7 @@ function App() {
 }
 ```
 
-:::info[Note]
+:::note
 
 Component names must start with a capital letter to distinguish them from regular HTML elements.
 Otherwise, they won't be recognized as components.
@@ -155,7 +155,7 @@ This example uses a [ternary operator](https://developer.mozilla.org/en-US/docs/
 When `count` is greater than 5, the component will display `"Count limit reached"`.
 Otherwise, it will display the current count with an increment button.
 
-:::info
+:::note
 To simplify conditional rendering, Solid provides built-in [control-flow](/concepts/control-flow/conditional-rendering) components like [`Show`](/concepts/control-flow/conditional-rendering#show), which create a more readable conditional rendering experience.
 
     ```tsx
diff --git a/src/routes/concepts/components/class-style.mdx b/src/routes/concepts/components/class-style.mdx
index d71c419b1d..a334d1e72a 100644
--- a/src/routes/concepts/components/class-style.mdx
+++ b/src/routes/concepts/components/class-style.mdx
@@ -96,7 +96,7 @@ const [current, setCurrent] = createSignal("foo");
 This is because `classList` selectively toggles only the classes that require alteration, while `class` will be re-evaluated each time.
 For a single conditional class, using `class` might be simpler but as the number of conditional classes increases, `classList` offers a more readable and declarative approach.
 
-:::info
+:::note
     While it is possible, mixing `class` and `classList` can introduce unexpected errors.
     If both are reactive when the `class` value changes, Solid will set the entire `class` attribute.
     This will remove any classes set by `classList`.
diff --git a/src/routes/concepts/components/event-handlers.mdx b/src/routes/concepts/components/event-handlers.mdx
index 13d7085677..3ca8658101 100644
--- a/src/routes/concepts/components/event-handlers.mdx
+++ b/src/routes/concepts/components/event-handlers.mdx
@@ -182,7 +182,7 @@ button
 </div>
 ```
 
-:::info[onInput / onChange]
+:::note[onInput / onChange]
 
     `onChange` and `onInput` events work according to their native behavior:
     - `onInput` will fire immediately after the value has changed
diff --git a/src/routes/concepts/context.mdx b/src/routes/concepts/context.mdx
index 109f1c68b3..714ae7c266 100644
--- a/src/routes/concepts/context.mdx
+++ b/src/routes/concepts/context.mdx
@@ -247,7 +247,7 @@ function Child() {
 
 If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
 
-:::info[More on default values]
+:::note[More on default values]
 Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
 :::
 
diff --git a/src/routes/concepts/control-flow/portal.mdx b/src/routes/concepts/control-flow/portal.mdx
index fe20f754fc..3c44995e4f 100644
--- a/src/routes/concepts/control-flow/portal.mdx
+++ b/src/routes/concepts/control-flow/portal.mdx
@@ -38,7 +38,7 @@ By putting the element outside of the parent element, it is no longer bound by t
 This creates a more accessible experience for users, as the content is no longer obscured.
 
 
-:::info
+:::note
   `<Portal>` will render wrapped unless specifically targeting `document.head`.
 
   This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.
diff --git a/src/routes/concepts/effects.mdx b/src/routes/concepts/effects.mdx
index fe15500bdf..f1e2cd54ad 100644
--- a/src/routes/concepts/effects.mdx
+++ b/src/routes/concepts/effects.mdx
@@ -87,7 +87,7 @@ setCount(1); // Output: 1, "Hello"
 setMessage("World"); // Output: 1, "World"
 ```
 
-:::info
+:::note
 When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*.
 While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous.
 This means that the order of execution of effects is *not guaranteed* and should not be relied upon.
diff --git a/src/routes/concepts/refs.mdx b/src/routes/concepts/refs.mdx
index 537d6bf9fd..ad07eaede5 100644
--- a/src/routes/concepts/refs.mdx
+++ b/src/routes/concepts/refs.mdx
@@ -29,7 +29,7 @@ function Component() {
 This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM.
 It can be used multiple times without having to worry about duplicate selectors.
 
-The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure. 
+The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure.
 This makes the component's JSX structure more difficult to read and understand.
 
 ## Refs in Solid
@@ -61,7 +61,7 @@ If access to an element is needed before it is added to the DOM, you can use the
 </p>
 ```
 
-:::info
+:::note
 In TypeScript, you must use a definitive assignment assertion.
 Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't
 confirm it.
diff --git a/src/routes/concepts/signals.mdx b/src/routes/concepts/signals.mdx
index d4558fe66b..aa59b65157 100644
--- a/src/routes/concepts/signals.mdx
+++ b/src/routes/concepts/signals.mdx
@@ -21,7 +21,7 @@ const [count, setCount] = createSignal(0);
 //       ^ getter  ^ setter
 ```
 
-    	:::info
+    	:::note
     	  The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
 
 This lets you extract values from the array.
@@ -79,7 +79,7 @@ function Counter() {
 }
 ```
 
-:::info
+:::note
 A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect)  or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
 
 Both functions subscribe to the signals accessed within them, establishing a dependency relationship.
diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx
index 7535141b30..5d4a7de3c3 100644
--- a/src/routes/concepts/stores.mdx
+++ b/src/routes/concepts/stores.mdx
@@ -193,7 +193,7 @@ const App = () => {
 }
 ```
 
-:::info
+:::note
 Separating the read and write capabilities of a store provides a valuable debugging advantage.
 
 This separation facilitates the tracking and control of the components that are accessing or changing the values.
@@ -358,8 +358,8 @@ setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
 // update users with location "Canada"
 setStore("users", (user) => user.location == "Canada" , "loggedIn", false)
 
-// update users with id 1, 2 or 3 
-let ids = [1,2,3] 
+// update users with id 1, 2 or 3
+let ids = [1,2,3]
 setStore("users", (user) => ids.includes(user.id) , "loggedIn", false)
 ```
 
diff --git a/src/routes/concepts/understanding-jsx.mdx b/src/routes/concepts/understanding-jsx.mdx
index 357f0d0946..8dea799786 100644
--- a/src/routes/concepts/understanding-jsx.mdx
+++ b/src/routes/concepts/understanding-jsx.mdx
@@ -87,7 +87,7 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
 </button>
 ```
 
-    	:::info
+    	:::note
     	  If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
 
 ```jsx
@@ -119,7 +119,7 @@ They connect the component with the data it requires, for seamless data flows an
   Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls.
   This results in components that react in real-time to data changes.
 
-:::info
+:::note
 Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
 This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
 
diff --git a/src/routes/configuration/environment-variables.mdx b/src/routes/configuration/environment-variables.mdx
index 7abe5ce926..292a9210ab 100644
--- a/src/routes/configuration/environment-variables.mdx
+++ b/src/routes/configuration/environment-variables.mdx
@@ -24,7 +24,7 @@ interface ImportMeta {
 }
 ```
 
-:::info
+:::note
 To prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed.
 
 For example:
diff --git a/src/routes/configuration/typescript.mdx b/src/routes/configuration/typescript.mdx
index 0b4d889c8c..61b1a82af7 100644
--- a/src/routes/configuration/typescript.mdx
+++ b/src/routes/configuration/typescript.mdx
@@ -114,7 +114,7 @@ function MyJsComponent() {
 }
 ```
 
-:::info
+:::note
 If you wish to change the entry point file from `index.jsx` to `index.tsx`, you need to modify the `src` attribute in `<script>` to look like the following:
 
 ```html
@@ -377,7 +377,7 @@ function MyGenericComponent<T>(props: MyProps<T>): JSX.Element {
 }
 ```
 
-:::info
+:::note
 Each `Component` type has a corresponding `Props` type that defines the shape
 of its properties. These `Props` types also accept the same generic types as
 their associated `Component` types.
@@ -479,7 +479,7 @@ return <div ref={divRef!}>...</div>
 
 In this case, using `divRef!` within the `ref` attribute signals to TypeScript that `divRef` will receive an assignment after this stage, which is more in line with how Solid works.
 
-:::info
+:::note
 While TypeScript does catch incorrect usage of refs that occur before their
 JSX block definition, it currently does not identify undefined variables
 within certain nested functions in Solid. Therefore, additional care is needed
@@ -644,7 +644,7 @@ declare module "solid-js" {
 <div on:Name={(event) => console.log("name is", event.detail.name)} />;
 ```
 
-:::info
+:::note
 <span>New in v1.9.0</span>
 :::
 
@@ -664,7 +664,7 @@ const handler: JSX.EventHandlerWithOptions<HTMLDivElement, Event> =  {
 <div on:click={handler} />;
 ```
 
-:::info
+:::note
 **Note**:
 By default, using native events like `mousemove` with the `on` prefix — for example, `<div on:mousemove={e => {}} />` — will trigger a TypeScript error.
 This occurs because these native events are not part of Solid's custom event type definitions.
diff --git a/src/routes/guides/complex-state-management.mdx b/src/routes/guides/complex-state-management.mdx
index 05d6bf1c67..068ab6e76c 100644
--- a/src/routes/guides/complex-state-management.mdx
+++ b/src/routes/guides/complex-state-management.mdx
@@ -216,7 +216,7 @@ const addTask = (text) => {
 
 Read about some of the other [advantages to using `produce`](/concepts/stores#store-updates-with-produce).
 
-    :::info
+    :::note
       Another benefit to working with `produce` is that it offers a way to modify a store without having to make multiple `setStore` calls.
 
 ```jsx
diff --git a/src/routes/guides/routing-and-navigation.mdx b/src/routes/guides/routing-and-navigation.mdx
index 0e3523643b..1772310ba5 100644
--- a/src/routes/guides/routing-and-navigation.mdx
+++ b/src/routes/guides/routing-and-navigation.mdx
@@ -467,7 +467,7 @@ Please note that while it is best practice to name these files as `[id].data.js`
 The value of a preload function is passed to the page component when called at any time other than "preload".
 This means you can initialize the page, or use [Data APIs](/solid-router/reference/data-apis/create-async).
 
-:::info
+:::note
 	To prevent a fetch from happening more than once, or to trigger a refetch, you
 	can use the [`query` function](/solid-router/reference/data-apis/query).
 :::
diff --git a/src/routes/guides/state-management.mdx b/src/routes/guides/state-management.mdx
index d7ff2830ea..b24814b165 100644
--- a/src/routes/guides/state-management.mdx
+++ b/src/routes/guides/state-management.mdx
@@ -335,7 +335,7 @@ When sharing state between components, you can access the state through [`props`
 Props values that are passed down from the parent component are read-only, which means they cannot be directly modified by the child component.
 However, you can pass down setter functions from the parent component to allow the child component to indirectly modify the parent's state.
 
-:::info
+:::note
 To encourage one-way data flow, props are passed as read-only or immutable values from the parent to child components.
 
 There are [specific utility functions for props](/concepts/components/props), however, that offer methods to modify props values.
diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx
index 0f747d7a16..5bee798414 100644
--- a/src/routes/guides/styling-components/tailwind.mdx
+++ b/src/routes/guides/styling-components/tailwind.mdx
@@ -4,7 +4,7 @@ order: 5
 mainNavExclude: true
 ---
 
-:::info[Note]
+:::note
 This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3).
 :::
 
diff --git a/src/routes/guides/testing.mdx b/src/routes/guides/testing.mdx
index 4403909760..5452f276ba 100644
--- a/src/routes/guides/testing.mdx
+++ b/src/routes/guides/testing.mdx
@@ -261,7 +261,7 @@ const createWrapper = (value) => (props) =>
   <DataContext value={value} {...props}/>
 ```
 
-:::info[Using multiple providers]
+:::note[Using multiple providers]
 If using multiple providers, [solid-primitives has `<MultiProvider>`](https://primitives.solidjs.community/package/context#multiprovider) to avoid nesting multiple levels of providers
 :::
 
diff --git a/src/routes/pt-br/quick-start.mdx b/src/routes/pt-br/quick-start.mdx
index 9b519a370a..17eaf23fe1 100644
--- a/src/routes/pt-br/quick-start.mdx
+++ b/src/routes/pt-br/quick-start.mdx
@@ -10,7 +10,7 @@ Additionally, we offer a [JavaScript](https://stackblitz.com/github/solidjs/temp
 
 ## Creating a Solid application
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
     - Familiarity with the command line
     - Install [Node.js](https://nodejs.org/en)
diff --git a/src/routes/pt-br/solid-router/quick-start.mdx b/src/routes/pt-br/solid-router/quick-start.mdx
index 9b519a370a..17eaf23fe1 100644
--- a/src/routes/pt-br/solid-router/quick-start.mdx
+++ b/src/routes/pt-br/solid-router/quick-start.mdx
@@ -10,7 +10,7 @@ Additionally, we offer a [JavaScript](https://stackblitz.com/github/solidjs/temp
 
 ## Creating a Solid application
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
     - Familiarity with the command line
     - Install [Node.js](https://nodejs.org/en)
diff --git a/src/routes/quick-start.mdx b/src/routes/quick-start.mdx
index b0a0d88595..c04a9c7b5d 100644
--- a/src/routes/quick-start.mdx
+++ b/src/routes/quick-start.mdx
@@ -10,7 +10,7 @@ Start with the [TypeScript](https://stackblitz.com/github/solidjs/templates/tree
 
 ## Create a Solid project
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
 - Familiarity with the command line.
 - A recent version of [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/).
diff --git a/src/routes/reference/basic-reactivity/create-signal.mdx b/src/routes/reference/basic-reactivity/create-signal.mdx
index 475a6092e0..6a56a40ef3 100644
--- a/src/routes/reference/basic-reactivity/create-signal.mdx
+++ b/src/routes/reference/basic-reactivity/create-signal.mdx
@@ -2,7 +2,7 @@
 title: createSignal
 ---
 
-Signals are the most basic reactive primitive. 
+Signals are the most basic reactive primitive.
 They track a single value (which can be a value of any type) that changes over time.
 
 ```tsx
@@ -38,8 +38,8 @@ Calling the getter (e.g., `count()` or `ready()`) returns the current value of t
 
 Crucial to automatic dependency tracking, calling the getter within a tracking scope causes the calling function to depend on this Signal, so that function will rerun if the Signal gets updated.
 
-Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below). 
-The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument. 
+Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below).
+The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument.
 The updated value is also returned by the setter. As an example:
 
 ```tsx
@@ -63,7 +63,7 @@ const newCount = setCount((prev) => prev + 1)
 
 ```
 
-:::info
+:::note
 	If you want to store a function in a Signal you must use the function form:
 
 	```tsx
diff --git a/src/routes/reference/components/no-hydration.mdx b/src/routes/reference/components/no-hydration.mdx
index ee8ab84b99..347380d399 100644
--- a/src/routes/reference/components/no-hydration.mdx
+++ b/src/routes/reference/components/no-hydration.mdx
@@ -7,7 +7,7 @@ During server-side rendering, components and elements wrapped within `<NoHydrati
 However, during client-side hydration, Solid bypasses the hydration process for the content within `<NoHydration>`.
 This means that elements within `<NoHydration>` will not have event listeners attached by Solid, and their state will not be managed reactively on the client-side after the initial render.
 
-:::info[Note]
+:::note
 Placing a `<Hydration>` component inside `<NoHydration>` has no effect and will not override the `<NoHydration>` behavior.
 :::
 
diff --git a/src/routes/reference/components/suspense.mdx b/src/routes/reference/components/suspense.mdx
index 07617e081a..dd433d1dc3 100644
--- a/src/routes/reference/components/suspense.mdx
+++ b/src/routes/reference/components/suspense.mdx
@@ -134,7 +134,7 @@ const MyComponentWithSuspenseAndShow = () => {
 
 In this code, we don't create _any_ DOM nodes inside {"<Suspense>"} before the resource resolves, so it is pretty much the same as the second example where we only used `<Show>`.
 
-:::info
+:::note
 	Suspense is triggered by reading a resource inside the {"<Suspense>"}{" "}
 	boundary. Components wrapped with suspense still run fully, just as they would
 	without suspense. However, code wrapped in `onMount` and `createEffect` only
diff --git a/src/routes/reference/jsx-attributes/attr.mdx b/src/routes/reference/jsx-attributes/attr.mdx
index 67e469bb75..934b911fea 100644
--- a/src/routes/reference/jsx-attributes/attr.mdx
+++ b/src/routes/reference/jsx-attributes/attr.mdx
@@ -9,7 +9,7 @@ Useful for Web Components where you want to set attributes.
 <my-element attr:status={props.status} />
 ```
 
-:::info[Strong-Typing Custom Attributes]
+:::note[Strong-Typing Custom Attributes]
 Type definitions are required when using TypeScript.
 See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
 :::
diff --git a/src/routes/reference/jsx-attributes/bool.mdx b/src/routes/reference/jsx-attributes/bool.mdx
index 78a2080715..94a682099c 100644
--- a/src/routes/reference/jsx-attributes/bool.mdx
+++ b/src/routes/reference/jsx-attributes/bool.mdx
@@ -20,7 +20,7 @@ This attribute is most useful for Web Components.
 
 ```
 
-:::info[Strong-Typing Custom Boolean Attributes]
+:::note[Strong-Typing Custom Boolean Attributes]
 Type definitions are required when using TypeScript.
 See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
 :::
diff --git a/src/routes/reference/jsx-attributes/classlist.mdx b/src/routes/reference/jsx-attributes/classlist.mdx
index aa3fcd23aa..e98d525752 100644
--- a/src/routes/reference/jsx-attributes/classlist.mdx
+++ b/src/routes/reference/jsx-attributes/classlist.mdx
@@ -18,7 +18,7 @@ First, `class` can be set like other attributes. For example:
 <div class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} />
 ```
 
-:::info
+:::note
 	Note that <code>className</code> was deprecated in Solid 1.4 in favor of {" "}
 	<code>class</code>.
 :::
@@ -27,7 +27,7 @@ Alternatively, the `classList` pseudo-attribute lets you specify an object, wher
 
 ```tsx
 <div
-	classList={{ 
+	classList={{
 		active: state.active,
 		editing: state.currentId === row.id,
 	}}
diff --git a/src/routes/reference/jsx-attributes/on.mdx b/src/routes/reference/jsx-attributes/on.mdx
index 3f81b85097..c7e8ee4ec4 100644
--- a/src/routes/reference/jsx-attributes/on.mdx
+++ b/src/routes/reference/jsx-attributes/on.mdx
@@ -11,7 +11,7 @@ For events with capital letters, listener options, or if you need to attach even
 
 This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.
 
-:::info
+:::note
 <span>New in v1.9.0</span>
 :::
 
diff --git a/src/routes/reference/jsx-attributes/prop.mdx b/src/routes/reference/jsx-attributes/prop.mdx
index 72f8b86f90..3195a22753 100644
--- a/src/routes/reference/jsx-attributes/prop.mdx
+++ b/src/routes/reference/jsx-attributes/prop.mdx
@@ -9,7 +9,7 @@ Forces the prop to be treated as a property instead of an attribute.
 <div prop:scrollTop={props.scrollPos + "px"} />
 ```
 
-:::info[Strong-Typing Custom Properties]
+:::note[Strong-Typing Custom Properties]
 Type definitions are required when using TypeScript.
 See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
-:::
\ No newline at end of file
+:::
diff --git a/src/routes/reference/reactive-utilities/catch-error.mdx b/src/routes/reference/reactive-utilities/catch-error.mdx
index bb1df0372c..49d1db3882 100644
--- a/src/routes/reference/reactive-utilities/catch-error.mdx
+++ b/src/routes/reference/reactive-utilities/catch-error.mdx
@@ -2,7 +2,7 @@
 title: catchError
 ---
 
-:::info
+:::note
 <span>New in v1.7.0</span>
 :::
 
diff --git a/src/routes/reference/reactive-utilities/on-util.mdx b/src/routes/reference/reactive-utilities/on-util.mdx
index 69af339ed6..1a8c45a889 100644
--- a/src/routes/reference/reactive-utilities/on-util.mdx
+++ b/src/routes/reference/reactive-utilities/on-util.mdx
@@ -36,7 +36,7 @@ setA("new"); // now it runs
 
 ## Using `on` with stores
 
-:::info
+:::note
 	Please note that on stores and mutable, adding or removing a property from the
 	parent object will trigger an effect. See [`createMutable`](/reference/store-utilities/create-mutable)
 
diff --git a/src/routes/reference/rendering/render-to-stream.mdx b/src/routes/reference/rendering/render-to-stream.mdx
index 8a92e23f8c..d51076eb53 100644
--- a/src/routes/reference/rendering/render-to-stream.mdx
+++ b/src/routes/reference/rendering/render-to-stream.mdx
@@ -36,7 +36,7 @@ renderToStream(App).pipeTo(writable)
 `onCompleteAll` is called when all server Suspense boundaries have settled.
 `renderId` is used to namespace renders when having multiple top level roots.
 
-:::info
+:::note
 	This API replaces the previous pipeToWritable and pipeToNodeWritable
 	APIs.
 :::
diff --git a/src/routes/reference/server-utilities/get-request-event.mdx b/src/routes/reference/server-utilities/get-request-event.mdx
index 44954ecdc3..1a409b8882 100644
--- a/src/routes/reference/server-utilities/get-request-event.mdx
+++ b/src/routes/reference/server-utilities/get-request-event.mdx
@@ -62,7 +62,7 @@ This is important because some headers previously set may not be needed to be se
 
 **Note:** This is important to keep in mind when choosing where to set headers and responses.
 
-:::info[Usage with SolidStart]
+:::note[Usage with SolidStart]
 	See this guide on [Request
 	Events](/solid-start/advanced/request-events).
 :::
diff --git a/src/routes/reference/store-utilities/create-mutable.mdx b/src/routes/reference/store-utilities/create-mutable.mdx
index 5c53aac82f..97b92394e6 100644
--- a/src/routes/reference/store-utilities/create-mutable.mdx
+++ b/src/routes/reference/store-utilities/create-mutable.mdx
@@ -13,7 +13,7 @@ import type { Store, StoreNode } from "solid-js/store"
 function createMutable<T extends StoreNode>(state: T | Store<T>): Store<T>;
 ```
 
-:::info
+:::note
 	It's important to recognize that a mutable state, which can be passed around and modified anywhere, may complicate the code structure and increase the risk of breaking unidirectional flow.
 
 	For a more robust alternative, it is generally recommended to use `createStore` instead.
diff --git a/src/routes/solid-meta/getting-started/installation-and-setup.mdx b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
index 2b2fd7ff0d..223501dc2c 100644
--- a/src/routes/solid-meta/getting-started/installation-and-setup.mdx
+++ b/src/routes/solid-meta/getting-started/installation-and-setup.mdx
@@ -3,7 +3,7 @@ title: Install and configure
 order: 1
 ---
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 If using Solid `v1.0`, use version `0.27.x` or greater.
 For earlier versions (eg. `v0.x`), you must use `v0.26.x`.
 :::
diff --git a/src/routes/solid-router/concepts/dynamic-routes.mdx b/src/routes/solid-router/concepts/dynamic-routes.mdx
index f4cc23b9e0..aba2b544e5 100644
--- a/src/routes/solid-router/concepts/dynamic-routes.mdx
+++ b/src/routes/solid-router/concepts/dynamic-routes.mdx
@@ -29,7 +29,7 @@ The colon (`:`) indicates that `id` can be any string.
 Once a URL matches the pattern, the `User` component will be shown.
 When using dynamic segments, the values can be accessed via the [`useParams`](/solid-router/reference/primitives/use-params) primitive within the component.
 
-:::info[Note on Animation/Transitions]
+:::note[Note on Animation/Transitions]
 Routes that share the same path match will be treated as the same route.
 If you want to force re-render you can wrap your component in a keyed [`Show`](/concepts/control-flow/conditional-rendering) like:
 
diff --git a/src/routes/solid-router/concepts/path-parameters.mdx b/src/routes/solid-router/concepts/path-parameters.mdx
index 418b5ec92a..4d7ff707e7 100644
--- a/src/routes/solid-router/concepts/path-parameters.mdx
+++ b/src/routes/solid-router/concepts/path-parameters.mdx
@@ -14,7 +14,7 @@ In this example, the `:id` parameter will capture any value that comes after `/u
 The colon `:` is used to denote a parameter, and `id` is the name of the parameter.
 When a URL matches this route, the `User` component will be rendered.
 
-:::info[Animations & Transitions]
+:::note[Animations & Transitions]
 Routes that share the same path match will be treated as the same route.
 If a force re-render is needed, you can wrap your component in a keyed [`Show`](/reference/components/show) component:
 
diff --git a/src/routes/solid-router/concepts/search-parameters.mdx b/src/routes/solid-router/concepts/search-parameters.mdx
index f8f78cee3e..8df4ddd720 100644
--- a/src/routes/solid-router/concepts/search-parameters.mdx
+++ b/src/routes/solid-router/concepts/search-parameters.mdx
@@ -43,7 +43,7 @@ setSearchParams({
 });
 ```
 
-:::info[Empty or null values]
+:::note[Empty or null values]
 	If the value of a search parameter's key is `undefined`, `null`, or an empty
 	string (`""`), it will be removed from the query string.
 :::
diff --git a/src/routes/solid-router/getting-started/config.mdx b/src/routes/solid-router/getting-started/config.mdx
index 0acdb3b0a5..f1b00bd859 100644
--- a/src/routes/solid-router/getting-started/config.mdx
+++ b/src/routes/solid-router/getting-started/config.mdx
@@ -52,7 +52,7 @@ render(() => <Router>{routes}</Router>, document.getElementById("app"));
 Each path in the array of route definition objects will be matched against the current URL, and the corresponding component will be rendered when a match is found.
 In the example above, the root path (`/`) renders the `Home` page, the path `/hello-world` renders an `h1` element, and the path `/about` renders the `About` component.
 
-:::info[Lazy Loading]
+:::note[Lazy Loading]
 When using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously.
 This will help improve the performance of your application by only loading the components when they are needed.
 
diff --git a/src/routes/solid-router/index.mdx b/src/routes/solid-router/index.mdx
index 89032c3e24..d75f93c719 100644
--- a/src/routes/solid-router/index.mdx
+++ b/src/routes/solid-router/index.mdx
@@ -4,7 +4,7 @@ title: Overview
 
 # Overview
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 	The docs are based on latest Solid Router.
 	To use this version, you need to have Solid v1.8.4 or later installed.
 :::
diff --git a/src/routes/solid-router/reference/components/a.mdx b/src/routes/solid-router/reference/components/a.mdx
index 76d050db52..e09be7df16 100644
--- a/src/routes/solid-router/reference/components/a.mdx
+++ b/src/routes/solid-router/reference/components/a.mdx
@@ -25,7 +25,7 @@ By default matching includes locations that are descendants (e.g.: href `/users`
 When JavaScript is present at the runtime, both components behave in a very similar fashion.
 This is because Solid Router adds a listener at the top level of the DOM and will augment the native `<a />` tag to a more performant experience (with soft navigation).
 
-:::info
+:::note
 
 To prevent, both `<A />` and `<a />` tags from soft navigating when JavaScript is present, pass a `target="_self"` attribute.
 
diff --git a/src/routes/solid-router/reference/components/route.mdx b/src/routes/solid-router/reference/components/route.mdx
index 187b80fc17..e1848905f3 100644
--- a/src/routes/solid-router/reference/components/route.mdx
+++ b/src/routes/solid-router/reference/components/route.mdx
@@ -5,7 +5,7 @@ title: Route
 `Route` is the component used when defining the routes of an application.
 This component is used to define the structure of the application and the components that will be rendered for each route.
 
-:::info[Multiple paths]
+:::note[Multiple paths]
 Routes support defining multiple paths using an array.
 This is useful for when you want a route to remain mounted and not re-render when switching between two or more locations that it matches:
 
diff --git a/src/routes/solid-router/reference/data-apis/cache.mdx b/src/routes/solid-router/reference/data-apis/cache.mdx
index 19416ce50f..6c43c26261 100644
--- a/src/routes/solid-router/reference/data-apis/cache.mdx
+++ b/src/routes/solid-router/reference/data-apis/cache.mdx
@@ -11,7 +11,7 @@ This API is deprecated since `v0.15.0` of Solid Router. Use [query](/solid-route
 When this newly created function is called for the first time with a specific set of arguments, the original function is run, and its return value is stored in a cache and returned to the caller of the created function.
 The next time the created function is called with the same arguments (as long as the cache is still valid), it will return the cached value instead of re-executing the original function.
 
-:::info
+:::note
 `cache` can be defined anywhere and then used inside your components with [`createAsync`](/solid-router/reference/data-apis/create-async).
 
 However, using `cache` directly in [`createResource`](/reference/basic-reactivity/create-resource) will not work since the fetcher is not reactive and will not invalidate properly.
diff --git a/src/routes/solid-router/reference/data-apis/query.mdx b/src/routes/solid-router/reference/data-apis/query.mdx
index 6e2226b804..eab7749ba1 100644
--- a/src/routes/solid-router/reference/data-apis/query.mdx
+++ b/src/routes/solid-router/reference/data-apis/query.mdx
@@ -6,7 +6,7 @@ title: query
 When this newly created function is called for the first time with a specific set of arguments, the original function is run, and its return value is stored in a cache and returned to the caller of the created function.
 The next time the created function is called with the same arguments (as long as the cache is still valid), it will return the cached value instead of re-executing the original function.
 
-:::info
+:::note
 `query` can be defined anywhere and then used inside your components with [`createAsync`](/solid-router/reference/data-apis/create-async).
 
 However, using `query` directly in [`createResource`](/reference/basic-reactivity/create-resource) will not work since the fetcher is not reactive and will not invalidate properly.
diff --git a/src/routes/solid-router/reference/data-apis/use-action.mdx b/src/routes/solid-router/reference/data-apis/use-action.mdx
index c63c1c064e..91d8a5e805 100644
--- a/src/routes/solid-router/reference/data-apis/use-action.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-action.mdx
@@ -13,7 +13,7 @@ const updateName = useAction(updateNameAction);
 const result = updateName("John Wick");
 ```
 
-:::info[Note]
+:::note
 `useAction` requires client-side JavaScript and is not progressively enhanceable.
 :::
 
diff --git a/src/routes/solid-router/reference/data-apis/use-submission.mdx b/src/routes/solid-router/reference/data-apis/use-submission.mdx
index f51ca4db20..7153e664cd 100644
--- a/src/routes/solid-router/reference/data-apis/use-submission.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx
@@ -24,7 +24,7 @@ function Component() {
 }
 ```
 
-:::info
+:::note
 Learn more about actions in the [`action`](/solid-router/reference/data-apis/action) docs.
 :::
 
diff --git a/src/routes/solid-router/reference/data-apis/use-submissions.mdx b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
index b17232eae5..c03ac618ca 100644
--- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx
+++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
@@ -42,7 +42,7 @@ function Component() {
 }
 ```
 
-:::info
+:::note
 To trigger a submission, [actions](https://docs.solidjs.com/) can be used.
 :::
 
diff --git a/src/routes/solid-router/reference/primitives/use-navigate.mdx b/src/routes/solid-router/reference/primitives/use-navigate.mdx
index 1458cd5600..82988990a3 100644
--- a/src/routes/solid-router/reference/primitives/use-navigate.mdx
+++ b/src/routes/solid-router/reference/primitives/use-navigate.mdx
@@ -19,7 +19,7 @@ if (unauthorized) {
 
 If you are inside of a query, action or cache (deprecated) function you will instead want to use [redirect](/solid-router/reference/response-helpers/redirect) or [reload](/solid-router/reference/response-helpers/reload).
 
-:::info
+:::note
 	The state is serialized using the [structured clone
 	algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
 	which does not support all object types.
diff --git a/src/routes/solid-start/building-your-application/api-routes.mdx b/src/routes/solid-start/building-your-application/api-routes.mdx
index 2fb4dfd926..11aee05483 100644
--- a/src/routes/solid-start/building-your-application/api-routes.mdx
+++ b/src/routes/solid-start/building-your-application/api-routes.mdx
@@ -17,7 +17,7 @@ The difference between API routes and UI routes is in what you should export fro
 UI routes export a default Solid component, while API Routes do not.
 Rather, they export functions that are named after the HTTP method that they handle.
 
-:::info
+:::note
 API routes are prioritized over UI route alternatives.
 If you want to have them overlap at the same path remember to use `Accept` headers.
 Returning without a response in a `GET` route will fallback to UI route handling.
diff --git a/src/routes/solid-start/getting-started.mdx b/src/routes/solid-start/getting-started.mdx
index 87e9c156bb..3cd0f1761e 100644
--- a/src/routes/solid-start/getting-started.mdx
+++ b/src/routes/solid-start/getting-started.mdx
@@ -51,7 +51,7 @@ dev
 Your application should now be running locally on port 3000.
 You can view it by navigating to [http://localhost:3000](http://localhost:3000).
 
-:::info
+:::note
     SolidStart uses [Vinxi](https://vinxi.vercel.app/) both for starting a development server with [Vite](https://vitejs.dev/) and for building and starting a production server with [Nitro](https://nitro.build/).
 
     When you run your application, you are actually running `vinxi dev` under the hood.
diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 2c80537a53..5a1a4c38a3 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -8,7 +8,7 @@ Since SolidStart itself provides minimal data-fetching APIs, most functionality
 
 This guide provides practical examples of common data-fetching tasks using these primitives.
 
-:::info[Note]
+:::note
 For detailed API information, refer to the [Solid](/) and [Solid Router](/solid-router) documentation.
 :::
 
@@ -387,6 +387,6 @@ export default function Page() {
 
 See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information.
 
-:::info[Advanced Data Handling]
+:::note[Advanced Data Handling]
 For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview).
 :::
diff --git a/src/routes/solid-start/guides/data-mutation.mdx b/src/routes/solid-start/guides/data-mutation.mdx
index f4b2d7fb8d..abcc75f27a 100644
--- a/src/routes/solid-start/guides/data-mutation.mdx
+++ b/src/routes/solid-start/guides/data-mutation.mdx
@@ -381,7 +381,7 @@ export default function Page() {
 }
 ```
 
-:::info[Multiple Submissions]
+:::note[Multiple Submissions]
 If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive.
 :::
 
diff --git a/src/routes/solid-start/reference/server/create-middleware.mdx b/src/routes/solid-start/reference/server/create-middleware.mdx
index a454fbc6c1..5d2b3204f1 100644
--- a/src/routes/solid-start/reference/server/create-middleware.mdx
+++ b/src/routes/solid-start/reference/server/create-middleware.mdx
@@ -9,7 +9,7 @@ There are two lifecycle events available: `onRequest` and `onBeforeResponse`.
 - The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler.
 - The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client.
 
-:::info[Note]
+:::note
 SolidStart will only execute the middleware functions if the path to the middleware file is configured within `app.config.ts` using the `middleware` option.
 This file must export the configuration using `export default`.
 :::
diff --git a/src/solidbase-theme/mdx-components.tsx b/src/solidbase-theme/mdx-components.tsx
index 60a9338013..20422a56c9 100644
--- a/src/solidbase-theme/mdx-components.tsx
+++ b/src/solidbase-theme/mdx-components.tsx
@@ -14,15 +14,15 @@ import { clientOnly } from "@solidjs/start";
 import { Callout } from "~/ui/callout";
 import { Tabs, TabList, TabPanel, Tab } from "~/ui/tabs";
 
-export { EditPageLink } from "../ui/edit-page-link";
-export { PageIssueLink } from "../ui/page-issue-link";
+export { EditPageLink } from "~/ui/edit-page-link";
+export { PageIssueLink } from "~/ui/page-issue-link";
 export { Callout } from "~/ui/callout";
 export { QuickLinks } from "~/ui/quick-links";
 export { ImageLinks } from "~/ui/image-links";
 
 const EraserLinkImpl = clientOnly(() => import("../ui/eraser-link"));
 
-type CalloutType = "info" | "tip" | "danger" | "caution";
+type CalloutType = "note" | "tip" | "advanced" | "caution" | "danger";
 
 export const DirectiveContainer = (
 	props: {
@@ -38,7 +38,11 @@ export const DirectiveContainer = (
 	return (
 		<Switch
 			fallback={
-				<Callout type={props.type as CalloutType} children={_children} />
+				<Callout
+					type={props.type as CalloutType}
+					title={props.title}
+					children={_children}
+				/>
 			}
 		>
 			<Match when={props.type === "tab"}>{_children}</Match>
diff --git a/src/ui/callout.tsx b/src/ui/callout.tsx
index b2d3f1a9f3..ff0725cb4a 100644
--- a/src/ui/callout.tsx
+++ b/src/ui/callout.tsx
@@ -10,7 +10,7 @@ import {
 } from "solid-heroicons/solid";
 
 const styles = {
-	info: {
+	note: {
 		container:
 			"bg-emerald-500/20 border-emerald-500 dark:border-emerald-400 dark:bg-emerald-800/20 dark:border-emerald-900",
 		title: "text-emerald-900 dark:text-emerald-300",
@@ -38,18 +38,18 @@ const styles = {
 };
 
 const icons = {
-	tip: (props: { class?: string }) => (
+	note: (props: { class?: string }) => (
 		<Icon
 			aria-hidden="true"
-			path={lightBulb}
-			class={`${props.class} fill-violet-900 dark:fill-violet-300`}
+			path={bookOpen}
+			class={`${props.class} fill-emerald-800 dark:fill-emerald-300`}
 		/>
 	),
-	info: (props: { class?: string }) => (
+	tip: (props: { class?: string }) => (
 		<Icon
 			aria-hidden="true"
-			path={bookOpen}
-			class={`${props.class} fill-emerald-800 dark:fill-emerald-300`}
+			path={lightBulb}
+			class={`${props.class} fill-violet-900 dark:fill-violet-300`}
 		/>
 	),
 	advanced: (props: { class?: string }) => (
@@ -75,17 +75,16 @@ const icons = {
 	),
 };
 
+type CalloutType = keyof typeof styles;
+
 export type CalloutProps = {
 	title?: string;
 	children: JSX.Element;
-	type?: keyof typeof styles;
+	type?: CalloutType;
 };
 
 export function Callout(props: CalloutProps) {
-	const mergedProps = mergeProps(
-		{ type: "info" as keyof typeof styles },
-		props
-	);
+	const mergedProps = mergeProps({ type: "note" as CalloutType }, props);
 
 	const iconType = untrack(() => mergedProps.type);
 
@@ -103,7 +102,7 @@ export function Callout(props: CalloutProps) {
 					when={props.title}
 					fallback={
 						<span class="capitalize font-semibold text-xl">
-							{props.type || "Info"}
+							{props.type || "Note"}
 						</span>
 					}
 				>