diff --git a/src/content/structured/components/cards/code.mdx b/src/content/structured/components/cards/code.mdx
index a6f2c23c0..970701ff1 100644
--- a/src/content/structured/components/cards/code.mdx
+++ b/src/content/structured/components/cards/code.mdx
@@ -1,7 +1,7 @@
---
path: "/components/card/code"
-date: "2023-02-03"
+date: "2023-10-11"
title: "Card"
@@ -25,6 +25,7 @@ import {
IcButton,
IcTypography,
SlottedSVG,
+ IcBadge,
} from "@ukic/react";
export const CardIcon = () => (
@@ -979,6 +980,68 @@ export const clickableBtn = [
+### With badge
+
+export const withBadge = [
+ {
+ language: "Web component",
+ snippet: `
+
+
+`,
+ },
+ {
+ language: "React",
+ snippet: `
+
+
+
+
+
+`,
+ },
+];
+
+
+
+
+
+
+
+
### Disabled
export const disabled = [
diff --git a/src/content/structured/components/side-nav/code.mdx b/src/content/structured/components/side-nav/code.mdx
index 37b5291b3..296edc33d 100644
--- a/src/content/structured/components/side-nav/code.mdx
+++ b/src/content/structured/components/side-nav/code.mdx
@@ -1,7 +1,7 @@
---
path: "/components/side-navigation/code"
-date: "2023-07-28"
+date: "2023-10-11"
title: "Side navigation"
@@ -29,6 +29,7 @@ import {
IcDivider,
IcLink,
SlottedSVG,
+ IcBadge,
} from "@ukic/react";
import {
@@ -625,6 +626,165 @@ export const snippetsCollapsed = [
+### With badges on navigation items
+
+export const snippetsBadge = [
+ {
+ language: "Web component",
+ snippet: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`,
+ },
+ {
+ language: "React",
+ snippet: `
+
+ coffee-outline
+
+
+
+
+ home
+
+
+
+
+
+
+ magnify
+
+
+
+
+
+
+ coffee-outline
+
+
+
+
+
+
+ coffee-maker-outline
+
+
+
+
+
+ cog-outline
+
+
+
+`,
+ },
+];
+
+
+
+
+ coffee-outline
+
+
+
+
+ home
+
+
+
+
+
+
+ magnify
+
+
+
+
+
+
+ coffee-outline
+
+
+
+
+
+
+ coffee-maker-outline
+
+
+
+
+
+ cog-outline
+
+
+
+
+
+
### With Material Design icons in SlottedSVG
[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in ``.
diff --git a/src/content/structured/components/top-nav/code.mdx b/src/content/structured/components/top-nav/code.mdx
index d297afcf3..505b0062b 100644
--- a/src/content/structured/components/top-nav/code.mdx
+++ b/src/content/structured/components/top-nav/code.mdx
@@ -1,7 +1,7 @@
---
path: "/components/top-navigation/code"
-date: "2023-07-17"
+date: "2023-10-11"
title: "Top navigation"
@@ -29,6 +29,7 @@ import {
IcNavigationItem,
IcNavigationGroup,
SlottedSVG,
+ IcBadge,
} from "@ukic/react";
import { MemoryRouter, NavLink } from "react-router-dom";
@@ -525,6 +526,116 @@ export const snippetsLeftAligned = [
+### With badge on navigation button
+
+export const snippetsBadge = [
+ {
+ language: "Web component",
+ snippet: `
+
+
+
+
+
+
+
+
+
+
+
+`,
+ },
+ {
+ language: "React",
+ snippet: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`,
+ },
+];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
### With short app title
View on a small screen size to display the short title in place of the app title.