Skip to content

(docs) Document badge component #1050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 30, 2025
Merged

(docs) Document badge component #1050

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6bf3d7
document badge component
devalog Sep 30, 2025
74c4145
update formatting
devalog Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions fern/products/docs/docs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
124 changes: 124 additions & 0 deletions fern/products/docs/pages/component-library/default-components/badges.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
When set to `true`, displays the badge with a more subtle background style. Can be combined with `outlined`.
</ParamField>

<ParamField path="outlined" type="boolean" required={false} default="false">
When set to `true`, 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="true">Minimal</Badge> <br />
<Badge intent="success" outlined="true">Outlined</Badge> <br />
<Badge intent="success" minimal="true" outlined="true">Minimal and outlined</Badge>
</Tab>
<Tab title="Markdown">
```markdown
<Badge intent="success">Default</Badge> <br />
<Badge intent="success" minimal="true">Minimal</Badge> <br />
<Badge intent="success" outlined="true">Outlined</Badge> <br />
<Badge intent="success" minimal="true" outlined="true">Minimal and outlined</Badge>
```
</Tab>
</Tabs>
4 changes: 3 additions & 1 deletion fern/products/docs/pages/component-library/default-components/callouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down