Add <Badge> component

.changeset/wicked-melons-study.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/starlight': minor
+---
+
+Adds the `<Badge>` component
+

docs/src/content/docs/guides/components.mdx

@@ -296,3 +296,60 @@ The code above generates the following on the page:
 import importedCode from '/src/env.d.ts?raw';
 
 <Code code={importedCode} lang="ts" title="src/env.d.ts" />
+
+### Badge
+
+import { Badge } from '@astrojs/starlight/components';
+
+Use the `<Badge>` component to display small pieces of information, such as status or labels.
+
+Place the content you want to display inside the `<Badge>` component. Optionally, you can specify a `variant` attribute with values like `tip`, `note`, `caution`, `danger`, `success`, or `default` to adjust the badge's color.
+
+```mdx
+
+import { Badge } from '@astrojs/starlight/components';
+
+- <Badge variant="note">Note</Badge>
+- <Badge variant="tip">Tip</Badge>
+- <Badge variant="success">Success</Badge>
+- <Badge variant="danger">Danger</Badge>
+- <Badge variant="caution">Caution</Badge>
+- <Badge variant="default">Default</Badge>
+
+```
+- <Badge variant="note">Note</Badge>
+- <Badge variant="tip">Tip</Badge>
+- <Badge variant="success">Success</Badge>
+- <Badge variant="danger">Danger</Badge>
+- <Badge variant="caution">Caution</Badge>
+- <Badge variant="default">Default</Badge>
+
+You can customize the badge variants colors by setting the CSS variables.
+
+```css
+:root {
+  --sl-badge-default-bg: var(--sl-color-accent-low);
+	--sl-badge-default-border: var(--sl-color-accent);
+	--sl-badge-default-text: var(--sl-color-accent-high);
+
+	--sl-badge-note-bg: var(--sl-color-blue-low);
+	--sl-badge-note-border: var(--sl-color-blue);
+	--sl-badge-note-text: var(--sl-color-blue-high);
+
+	--sl-badge-danger-bg: var(--sl-color-red-low);
+	--sl-badge-danger-border: var(--sl-color-red);
+	--sl-badge-danger-text: var(--sl-color-red-high);
+
+	--sl-badge-success-bg: var(--sl-color-green-low);
+	--sl-badge-success-border: var(--sl-color-green);
+	--sl-badge-success-text: var(--sl-color-green-high);
+
+	--sl-badge-caution-bg: var(--sl-color-orange-low);
+	--sl-badge-caution-border: var(--sl-color-orange);
+	--sl-badge-caution-text: var(--sl-color-orange-high);
+
+	--sl-badge-tip-bg: var(--sl-color-purple-low);
+	--sl-badge-tip-border: var(--sl-color-purple);
+	--sl-badge-tip-text: var(--sl-color-purple-high);
+}
+```

docs/src/content/docs/reference/test.mdx

@@ -0,0 +1,72 @@
+---
+title: Testing badges
+description: Learn how to start building your next documentation site with Starlight by Astro.
+sidebar:
+  badge: Test
+---
+
+import { Tabs, TabItem, Badge } from '@astrojs/starlight/components';
+
+## APIs
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+### <Badge variant="success">POST</Badge> `/api/users`
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+#### <Badge variant="tip">PUT</Badge> `/api/users`
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+##### <Badge variant="danger">DELETE</Badge> `/api/users`
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+### Lists
+
+- *Italic <Badge variant="caution">caution</Badge>* lorem ipsum
+- **Bold <Badge variant="tip">caution</Badge>** lorem ipsum
+- ***Bold Italic <Badge variant="note">caution</Badge>*** lorem ipsum
+- Custom <Badge class="custom-badge">Custom</Badge> lorem ipsum
+
+### Asides
+
+:::danger
+<Badge variant="note">note</Badge> <Badge variant="caution">caution</Badge> <Badge variant="danger">danger</Badge> <Badge variant="success">sucess</Badge> <Badge variant="tip">tip</Badge> <Badge variant="default">default</Badge>
+:::
+
+
+:::note
+<Badge variant="note">note</Badge> <Badge variant="caution">caution</Badge> <Badge variant="danger">danger</Badge> <Badge variant="success">sucess</Badge> <Badge variant="tip">tip</Badge> <Badge variant="default">default</Badge>
+:::
+
+### Tabs
+
+<Tabs>
+  <TabItem label="Tab 1">
+    This API is <Badge variant="caution">caution</Badge> and should be avoided.
+
+    ```js
+    const foo = 'bar';
+    ```
+
+  </TabItem>
+  <TabItem label="Tab 2">
+    This API is <Badge variant="danger">danger</Badge> and should be avoided.
+
+    ```js
+    const foo = 'bar';
+    ```
+  </TabItem>
+</Tabs>
+
+
+### Tables
+
+| Method | Endpoint | Description |
+| ------ | -------- | ----------- |
+| <Badge variant="success">GET</Badge> | `/api/users` | Get all users |
+| <Badge variant="tip">POST</Badge> | `/api/users` | Create a new user |
+| <Badge variant="note">PUT</Badge> | `/api/users` | Update a user |
+| <Badge variant="danger">DELETE</Badge> | `/api/users` | Delete a user |

packages/starlight/components.ts

@@ -1,4 +1,5 @@
 export { default as Aside } from './user-components/Aside.astro';
+export { default as Badge } from './user-components/Badge.astro';
 export { default as Card } from './user-components/Card.astro';
 export { default as CardGrid } from './user-components/CardGrid.astro';
 export { default as Icon } from './user-components/Icon.astro';

packages/starlight/components/SidebarSublist.astro

@@ -1,7 +1,7 @@
 ---
 import { flattenSidebar, type SidebarEntry } from '../utils/navigation';
 import Icon from '../user-components/Icon.astro';
-import Badge from './Badge.astro';
+import Badge from '../user-components/Badge.astro';
 
 interface Props {
 	sublist: SidebarEntry[];
@@ -26,10 +26,9 @@ const { sublist, nested } = Astro.props;
 						{entry.badge && (
 							<>
 								{' '}
-								<Badge
-									text={entry.badge.text}
-									variant={entry.isCurrent ? 'outline' : entry.badge.variant}
-								/>
+								<Badge variant={entry.badge.variant} class={entry.badge.class}>
+									{entry.badge.text}
+								</Badge>
 							</>
 						)}
 					</a>
@@ -43,7 +42,9 @@ const { sublist, nested } = Astro.props;
 								{entry.badge && (
 									<>
 										{' '}
-										<Badge text={entry.badge.text} variant={entry.badge.variant} />
+										<Badge variant={entry.badge.variant} class={entry.badge.class}>
+											{entry.badge.text}
+										</Badge>
 									</>
 								)}
 							</div>

packages/starlight/schemas/badge.ts

@@ -1,9 +1,12 @@
 import { z } from 'astro/zod';
 
+export const badgeVariants = ['note', 'danger', 'success', 'caution', 'tip', 'default'] as const;
+
 const badgeSchema = () =>
 	z.object({
-		variant: z.enum(['note', 'danger', 'success', 'caution', 'tip', 'default']).default('default'),
+		variant: z.enum(badgeVariants).default('default'),
 		text: z.string(),
+		class: z.string().optional(),
 	});
 
 export const BadgeConfigSchema = () =>