(docs) Document badge component (#1050)

Author: devalog

fern/products/docs/docs.yml

@@ -44,6 +44,9 @@ navigation:
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots
+          - page: Badges
+            path: ./pages/component-library/default-components/badges.mdx
+            icon: fa-regular fa-ribbon
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
             icon: fa-duotone fa-arrow-pointer

fern/products/docs/pages/component-library/default-components/badges.mdx

@@ -0,0 +1,124 @@
+---
+title: Badges
+description: Display small labels for status, versions, and metadata inline with your content.
+---
+
+Use the `Badge` component to display small pieces of information, such as status indicators, categories, versions, or release dates.
+
+To display longer notes, use the [Callouts component](/docs/writing-content/components/callouts) instead. 
+
+<Tabs>
+<Tab title="Badge example">
+
+### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+
+</Tab>
+<Tab title="Markdown">
+
+```jsx
+### Plant Care API <Badge intent="success">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+```
+
+</Tab>
+</Tabs>
+
+## Badge varieties
+
+### Success
+
+<Badge intent="success">Success</Badge>
+
+```jsx
+<Badge intent="success">Success</Badge>
+```
+
+### Note
+
+<Badge intent="note">Note</Badge>
+
+```jsx
+<Badge intent="note">Note</Badge>
+```
+
+### Tip
+
+<Badge intent="tip">Tip</Badge>
+
+```jsx
+<Badge intent="tip">Tip</Badge>
+```
+
+### Warning
+
+<Badge intent="warning">Warning</Badge>
+
+```jsx
+<Badge intent="warning">Warning</Badge>
+```
+
+### Error
+
+<Badge intent="error">Error</Badge>
+
+```jsx
+<Badge intent="error">Error</Badge>
+```
+
+### Info
+
+<Badge intent="info">Info</Badge>
+
+```jsx
+<Badge intent="info">Info</Badge>
+```
+
+### Launch
+
+<Badge intent="launch">Launch</Badge>
+
+```jsx
+<Badge intent="launch">Launch</Badge>
+```
+
+### Check
+
+<Badge intent="check">Check</Badge>
+
+```jsx
+<Badge intent="check">Check</Badge>
+```
+
+## Properties
+
+Customize your Badges using the following properties:
+
+<ParamField path="intent" type="string" required={true}>
+  The semantic color of the badge. Available options: `success`, `note`, `tip`, `warning`, `error`, `info`, `launch`, `check`
+</ParamField>
+
+<ParamField path="minimal" type="boolean" required={false} default="false">
+  Displays the badge with a more subtle background style. Can be combined with `outlined`.
+</ParamField>
+
+<ParamField path="outlined" type="boolean" required={false} default="false">
+  Displays the badge with an outlined border style. Can be combined with `minimal`.
+</ParamField>
+
+<br />
+
+<Tabs>
+<Tab title="Success badge with different styles">
+<Badge intent="success">Default</Badge> <br />
+<Badge intent="success" minimal>Minimal</Badge> <br />
+<Badge intent="success" outlined>Outlined</Badge> <br />
+<Badge intent="success" minimal outlined>Minimal and outlined</Badge> 
+</Tab>
+<Tab title="Markdown">
+```markdown
+<Badge intent="success">Default</Badge> <br />
+<Badge intent="success" minimal>Minimal</Badge> <br />
+<Badge intent="success" outlined>Outlined</Badge> <br />
+<Badge intent="success" minimal outlined>Minimal and outlined</Badge> 
+```
+</Tab>
+</Tabs>

fern/products/docs/pages/component-library/default-components/callouts.mdx

@@ -3,7 +3,9 @@ title: 'Callouts'
 description: 'Highlight important information, warnings, or tips in your documentation.'
 ---
 
-Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.
+Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers. 
+
+To display very short pieces of information like status indicators and version numbers, use the [Badges component](/docs/writing-content/components/badges)
 
 ## Callout varieties