diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index ef41ca534..f6c1f352e 100644 --- a/fern/products/docs/docs.yml +++ b/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 diff --git a/fern/products/docs/pages/component-library/default-components/badges.mdx b/fern/products/docs/pages/component-library/default-components/badges.mdx new file mode 100644 index 000000000..e08ba9f4b --- /dev/null +++ b/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. + + + + +### Plant Care API v2.1.0 New + + + + +```jsx +### Plant Care API v2.1.0 New +``` + + + + +## Badge varieties + +### Success + +Success + +```jsx +Success +``` + +### Note + +Note + +```jsx +Note +``` + +### Tip + +Tip + +```jsx +Tip +``` + +### Warning + +Warning + +```jsx +Warning +``` + +### Error + +Error + +```jsx +Error +``` + +### Info + +Info + +```jsx +Info +``` + +### Launch + +Launch + +```jsx +Launch +``` + +### Check + +Check + +```jsx +Check +``` + +## Properties + +Customize your Badges using the following properties: + + + The semantic color of the badge. Available options: `success`, `note`, `tip`, `warning`, `error`, `info`, `launch`, `check` + + + + Displays the badge with a more subtle background style. Can be combined with `outlined`. + + + + Displays the badge with an outlined border style. Can be combined with `minimal`. + + +
+ + + +Default
+Minimal
+Outlined
+Minimal and outlined +
+ +```markdown +Default
+Minimal
+Outlined
+Minimal and outlined +``` +
+
\ No newline at end of file diff --git a/fern/products/docs/pages/component-library/default-components/callouts.mdx b/fern/products/docs/pages/component-library/default-components/callouts.mdx index a59399d23..4a87a2eb7 100644 --- a/fern/products/docs/pages/component-library/default-components/callouts.mdx +++ b/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