@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Anchor/isCopy.en.mdx

@@ -0,0 +1,23 @@
+## Copy link
+
+The `isCopy` property switches the component to anchor link copying mode to clipboard.
+
+**Properties:**
+
+- `isCopy` — enables link copying mode (default `false`)
+- `iconTag` — icon displayed in copy mode
+- `iconContentCopy` — icon shown after successful copy
+- `delayHide` — delay before hiding notification in milliseconds (default `3072`)
+
+When `isCopy` is enabled, clicking the component doesn't scroll to the anchor but copies the full link (including origin and pathname) to clipboard. After copying, a Tooltip with notification automatically opens and closes after the time specified in `delayHide`. The icon changes from `iconTag` to `iconContentCopy` for visual confirmation of the action.
+
+```html
+<template>
+  <!-- Basic mode -->
+  <Anchor name="section" text="Copy link" isCopy />
+
+  <!-- With custom icons -->
+  <Anchor name="heading" isCopy iconTag="share" iconContentCopy="check" />
+</template>
+```
+

package/src/media/mdx/Anchor/isCopy.ru.mdx

@@ -0,0 +1,23 @@
+## Копирование ссылки
+
+Свойство `isCopy` переключает компонент в режим копирования ссылки на якорь в буфер обмена.
+
+**Свойства:**
+
+- `isCopy` — включает режим копирования ссылки (по умолчанию `false`)
+- `iconTag` — иконка, отображаемая в режиме копирования
+- `iconContentCopy` — иконка, показываемая после успешного копирования
+- `delayHide` — задержка перед скрытием уведомления в миллисекундах (по умолчанию `3072`)
+
+При включённом `isCopy` клик по компоненту не выполняет прокрутку к якорю, а копирует полную ссылку (включая origin и pathname) в буфер обмена. После копирования автоматически открывается Tooltip с уведомлением, который закрывается через время, указанное в `delayHide`. Иконка меняется с `iconTag` на `iconContentCopy` для визуального подтверждения действия.
+
+```html
+<template>
+  <!-- Базовый режим -->
+  <Anchor name="section" text="Скопировать ссылку" isCopy />
+
+  <!-- С кастомными иконками -->
+  <Anchor name="heading" isCopy iconTag="share" iconContentCopy="check" />
+</template>
+```
+

package/src/media/mdx/Anchor/scroll.en.mdx

@@ -0,0 +1,34 @@
+## Scroll Settings
+
+The `behavior`, `block`, `inline`, and `shift` properties control the scrolling behavior to the element when navigating via an anchor.
+
+**Properties:**
+
+- `behavior` — defines the scroll transition animation (`auto`, `smooth`, `instant`)
+- `block` — vertical alignment of the element (`start`, `center`, `end`, `nearest`)
+- `inline` — horizontal alignment of the element (`start`, `center`, `end`, `nearest`)
+- `shift` — scroll offset from the top edge (in pixels)
+
+> **Note:** If the `shift` property is set, the component uses `window.scrollTo` instead of `element.scrollIntoView`. In this case, the `block` and `inline` properties are ignored, and scrolling is always aligned to the top edge of the element with the specified offset.
+
+These properties allow you to customize exactly how the page scrolls to the target element. For example, you can enable smooth scrolling or change the positioning of the element on the screen after scrolling.
+
+```html
+<template>
+  <Anchor
+    href="#target"
+    behavior="smooth"
+    block="center"
+    inline="nearest"
+  >
+    Go to element
+  </Anchor>
+
+  <Anchor
+    href="#target"
+    :shift="100"
+  >
+    Go with offset
+  </Anchor>
+</template>
+```

package/src/media/mdx/Anchor/scroll.ru.mdx

@@ -0,0 +1,35 @@
+## Настройка прокрутки
+
+Свойства `behavior`, `block`, `inline` и `shift` управляют поведением прокрутки к элементу при переходе по якорю.
+
+**Свойства:**
+
+- `behavior` — определяет анимацию прокрутки (`auto`, `smooth`, `instant`)
+- `block` — вертикальное выравнивание элемента (`start`, `center`, `end`, `nearest`)
+- `inline` — горизонтальное выравнивание элемента (`start`, `center`, `end`, `nearest`)
+- `shift` — смещение прокрутки от верхнего края (в пикселях)
+
+> **Примечание:** Если задано свойство `shift`, компонент использует `window.scrollTo` вместо `element.scrollIntoView`. В этом случае свойства `block` и `inline` игнорируются, и прокрутка всегда выполняется к верхней границе элемента с учетом указанного смещения.
+
+Эти свойства позволяют настроить, как именно страница будет прокручиваться к целевому элементу. Например, можно сделать плавную прокрутку или изменить позиционирование элемента на экране после прокрутки.
+
+```html
+<template>
+  <Anchor
+    href="#target"
+    behavior="smooth"
+    block="center"
+    inline="nearest"
+  >
+    Перейти к элементу
+  </Anchor>
+
+  <Anchor
+    href="#target"
+    :shift="100"
+  >
+    Перейти со смещением
+  </Anchor>
+</template>
+```
+

package/src/media/mdx/Anchor/wikiMdxAnchor.ts

@@ -0,0 +1,43 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import anchorEn from './anchor.en.mdx'
+import anchorRu from './anchor.ru.mdx'
+import exposeGoEn from './expose.go.en.mdx'
+import exposeGoRu from './expose.go.ru.mdx'
+import hideEn from './hide.en.mdx'
+import hideRu from './hide.ru.mdx'
+import isCopyEn from './isCopy.en.mdx'
+import isCopyRu from './isCopy.ru.mdx'
+import scrollEn from './scroll.en.mdx'
+import scrollRu from './scroll.ru.mdx'
+
+/**
+ * MDX files for Anchor component
+ *
+ * MDX файлы для компонента Anchor
+ */
+export const wikiMdxAnchor: StorybookComponentsMdxItem = {
+  name: 'Anchor',
+  descriptions: {
+    'anchor': {
+      en: anchorEn,
+      ru: anchorRu
+    },
+    'expose.go': {
+      en: exposeGoEn,
+      ru: exposeGoRu
+    },
+    'hide': {
+      en: hideEn,
+      ru: hideRu
+    },
+    'isCopy': {
+      en: isCopyEn,
+      ru: isCopyRu
+    },
+    'scroll': {
+      en: scrollEn,
+      ru: scrollRu
+    }
+  }
+}

package/src/media/mdx/Arrow/arrow.en.mdx

@@ -0,0 +1,33 @@
+Component for displaying a graphical indicator (arrow) used to visually link floating elements to their target.
+
+Arrow provides automatic or manual positioning of the indicator. It is often used within Tooltip, Popover, and Dropdown components to indicate the direction towards the trigger or target element. The component supports adaptation to various sizes and styles, and can dynamically update its position.
+
+**Key Features:**
+
+- Automatic and manual positioning (top, bottom, left, right)
+- Support for inverted style
+- Binding to a target element (elementTarget)
+- Dynamic position updates
+- Customizable SVG arrow graphics
+- Integration with positioning components
+
+**Typical Use Cases:**
+
+- Indicators in tooltips
+- Arrows in dropdown menus and popovers
+- Visual links in tour guides
+- Directional indicators in the interface
+
+```html
+<script setup>
+import { Arrow } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="relative p-4 border rounded">
+    Content with arrow
+    <Arrow position="top" />
+  </div>
+</template>
+```
+

package/src/media/mdx/Arrow/arrow.ru.mdx

@@ -0,0 +1,33 @@
+Компонент для отображения графического указателя (стрелки), используемого для визуальной связи всплывающих элементов с их целью.
+
+Arrow обеспечивает автоматическое или ручное позиционирование указателя. Часто применяется в составе компонентов Tooltip, Popover и Dropdown для указания направления на триггер или целевой элемент. Компонент поддерживает адаптацию под различные размеры и стили, а также может динамически обновлять свое положение.
+
+**Основные возможности:**
+
+- Автоматическое и ручное позиционирование (top, bottom, left, right)
+- Поддержка инвертированного стиля
+- Привязка к целевому элементу (elementTarget)
+- Динамическое обновление положения
+- Настраиваемая SVG-графика стрелки
+- Интеграция с компонентами позиционирования
+
+**Типичные сценарии использования:**
+
+- Указатели во всплывающих подсказках
+- Стрелки в выпадающих меню и поповерах
+- Визуальные связи в пошаговых руководствах
+- Индикаторы направления в интерфейсе
+
+```html
+<script setup>
+import { Arrow } from 'dxt-ui'
+</script>
+
+<template>
+  <div class="relative p-4 border rounded">
+    Контент с указателем
+    <Arrow position="top" />
+  </div>
+</template>
+```
+

package/src/media/mdx/Arrow/wikiMdxArrow.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import arrowEn from './arrow.en.mdx'
+import arrowRu from './arrow.ru.mdx'
+
+/**
+ * MDX files for Arrow component
+ *
+ * MDX файлы для компонента Arrow
+ */
+export const wikiMdxArrow: StorybookComponentsMdxItem = {
+  name: 'Arrow',
+  descriptions: {
+    arrow: {
+      en: arrowEn,
+      ru: arrowRu
+    }
+  }
+}

package/src/media/mdx/Badge/badge.en.mdx

@@ -1,11 +1,89 @@
 ## Description
 
-The Badge component is a small visual indicator used to display status, count, or notifications on interface elements. It provides a compact way to convey important information without taking up much space.
+Compact visual indicator for displaying status, notification counts, or markers on interface elements with support for various display modes and automatic overflow management.
 
-### Key Features
+Badge provides a universal solution for creating informative indicators with flexible content configuration, positioning, and appearance. The component supports displaying text, numbers with maximum value limits, icons, and dot indicators, automatically hides when content is absent, and integrates with the slot system for customization.
 
-- **Status indication**: Display different states with color variants
-- **Content flexibility**: Show text, numbers, or leave empty for dot indicator
-- **Smart overflow**: Automatically handle large numbers with max value display
-- **Positioning**: Flexible placement relative to parent elements
-- **Accessibility**: Built-in support for screen readers and keyboard navigation
+**Key features:**
+
+- Multiple display modes (text, numbers, icons, dot indicator)
+- Automatic overflow management with maximum value configuration
+- Flexible positioning relative to parent elements (overlap, vertical, horizontal)
+- Automatic hiding when content is absent (dot, icon, label)
+- Integration with LabelNumberInclude for numeric value processing
+- Icon support through IconInclude
+- Color variants for different status types
+- Visibility control via hide property
+- Customization through slots for complete content control
+
+**Common use cases:**
+
+- Unread notification count indicators
+- Status markers on user avatars (online/offline)
+- Item counters in shopping carts or lists
+- New message indicators in chats
+- Status markers on product cards
+- Visual hints about available updates
+- Numeric indicators on tabs and menu items
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const cartCount = ref(5)
+const unreadMessages = ref(127)
+const isOnline = ref(true)
+
+const addToCart = () => {
+  cartCount.value++
+}
+</script>
+
+<template>
+  <div class="badge-examples">
+    <!-- Basic badge with number -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="shopping_cart" @click="addToCart"/>
+      <Badge :label="cartCount"/>
+    </div>
+
+    <!-- Badge with maximum value limit -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="notifications"/>
+      <Badge :label="unreadMessages" :label-max="99"/>
+    </div>
+
+    <!-- Dot status indicator -->
+    <div style="position: relative; display: inline-block;">
+      <Avatar src="/user-avatar.jpg"/>
+      <Badge
+        dot
+        :selected="isOnline"
+        overlap="circular"
+      />
+    </div>
+
+    <!-- Badge with icon and text -->
+    <div style="position: relative; display: inline-block;">
+      <Button>Profile</Button>
+      <Badge
+        icon="verified"
+        label="Pro"
+        overlap="static"
+      />
+    </div>
+
+    <!-- Badge with custom positioning -->
+    <div style="position: relative; display: inline-block;">
+      <Card>Content</Card>
+      <Badge
+        label="New"
+        vertical="bottom"
+        horizontal="left"
+      />
+    </div>
+  </div>
+</template>
+```
+
+> Badge is designed as a universal UI component for creating compact visual indicators with comprehensive support for various content types, automatic display management, and flexible positioning settings.

package/src/media/mdx/Badge/badge.ru.mdx

@@ -1,11 +1,89 @@
 ## Описание
 
-Компонент Badge представляет собой небольшой визуальный индикатор, используемый для отображения статуса, количества или уведомлений на элементах интерфейса. Он обеспечивает компактный способ передачи важной информации, не занимая много места.
+Компактный визуальный индикатор для отображения статуса, количества уведомлений или маркеров на элементах интерфейса с поддержкой различных режимов отображения и автоматическим управлением переполнением.
 
-### Основные возможности
+Badge предоставляет универсальное решение для создания информативных индикаторов с гибкой настройкой содержимого, позиционирования и внешнего вида. Компонент поддерживает отображение текста, чисел с ограничением максимального значения, иконок и точечных индикаторов, автоматически скрывается при отсутствии контента и интегрируется с системой слотов для кастомизации.
 
-- **Индикация статуса**: Отображение различных состояний с помощью цветовых вариантов
-- **Гибкость содержимого**: Отображение текста, чисел или пустого индикатора-точки
-- **Умное переполнение**: Автоматическая обработка больших чисел с отображением максимального значения
-- **Позиционирование**: Гибкое размещение относительно родительских элементов
-- **Доступность**: Встроенная поддержка программ чтения с экрана и навигации с клавиатуры
+**Основные возможности:**
+
+- Множественные режимы отображения (текст, числа, иконки, точечный индикатор)
+- Автоматическое управление переполнением с настройкой максимального значения
+- Гибкое позиционирование относительно родительских элементов (overlap, vertical, horizontal)
+- Автоматическое скрытие при отсутствии контента (dot, icon, label)
+- Интеграция с LabelNumberInclude для обработки числовых значений
+- Поддержка иконок через IconInclude
+- Цветовые варианты для различных типов статуса
+- Управление видимостью через свойство hide
+- Кастомизация через слоты для полного контроля над содержимым
+
+**Типичные сценарии использования:**
+
+- Индикаторы количества непрочитанных уведомлений
+- Маркеры статуса на аватарах пользователей (онлайн/оффлайн)
+- Счетчики элементов в корзине или списках
+- Индикаторы новых сообщений в чатах
+- Статусные маркеры на карточках товаров
+- Визуальные подсказки о наличии обновлений
+- Числовые индикаторы на вкладках и пунктах меню
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const cartCount = ref(5)
+const unreadMessages = ref(127)
+const isOnline = ref(true)
+
+const addToCart = () => {
+  cartCount.value++
+}
+</script>
+
+<template>
+  <div class="badge-examples">
+    <!-- Базовый бейдж с числом -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="shopping_cart" @click="addToCart"/>
+      <Badge :label="cartCount"/>
+    </div>
+
+    <!-- Бейдж с ограничением максимального значения -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="notifications"/>
+      <Badge :label="unreadMessages" :label-max="99"/>
+    </div>
+
+    <!-- Точечный индикатор статуса -->
+    <div style="position: relative; display: inline-block;">
+      <Avatar src="/user-avatar.jpg"/>
+      <Badge
+        dot
+        :selected="isOnline"
+        overlap="circular"
+      />
+    </div>
+
+    <!-- Бейдж с иконкой и текстом -->
+    <div style="position: relative; display: inline-block;">
+      <Button>Профиль</Button>
+      <Badge
+        icon="verified"
+        label="Pro"
+        overlap="static"
+      />
+    </div>
+
+    <!-- Бейдж с кастомным позиционированием -->
+    <div style="position: relative; display: inline-block;">
+      <Card>Контент</Card>
+      <Badge
+        label="Новое"
+        vertical="bottom"
+        horizontal="left"
+      />
+    </div>
+  </div>
+</template>
+```
+
+> Badge разработан как универсальный UI-компонент для создания компактных визуальных индикаторов с комплексной поддержкой различных типов контента, автоматическим управлением отображением и гибкими настройками позиционирования.

package/src/media/mdx/Badge/dot.en.mdx

@@ -1,17 +1,21 @@
-## Dot Badge
+## Dot indicator
 
-The dot variant displays the badge as a small circular indicator without any text content, perfect for simple status notifications and presence indicators.
+The `dot` property transforms Badge into a compact circular indicator without text content, used for simple visual status notifications.
 
-### When to use
+**Possible values:**
 
-- **Presence indicators**: To show online/offline status or activity states
-- **Notification markers**: For indicating new messages, updates, or alerts without specific counts
-- **Status dots**: To display simple on/off or active/inactive states
-- **Minimalist design**: When space is limited and only basic indication is needed
+- `true` — displays Badge as a dot indicator
+- `false` — displays Badge in standard mode with content (default)
 
-### Visual characteristics
+Creates a minimalist visual marker for indicating states, activity, or notifications without displaying specific values. Ideal for user presence indicators (online/offline), unread notification markers, and status dots on interface elements. When the `dot` property is activated, any text content or numeric values are ignored, displaying only the color indicator.
 
-- **Compact size**: Takes minimal space while maintaining visibility
-- **No text content**: Pure visual indicator without labels or numbers
-- **Clean appearance**: Simple circular shape that integrates seamlessly
-- **Focus on state**: Emphasizes status rather than specific information
+```html
+<!-- Standard Badge with content -->
+<Badge label="5" />
+
+<!-- Dot indicator -->
+<Badge dot />
+
+<!-- Dot indicator for online status -->
+<Badge dot :selected="isOnline" overlap="circular" />
+```

package/src/media/mdx/Badge/dot.ru.mdx

@@ -1,17 +1,21 @@
-## Dot Badge
+## Точечный индикатор
 
-Точечный вариант отображает бейдж как небольшой круглый индикатор без текстового содержимого, идеально подходящий для простых уведомлений о статусе и индикаторов присутствия.
+Свойство `dot` преобразует Badge в компактный круглый индикатор без текстового содержимого, используемый для простых визуальных уведомлений о статусе.
 
-### Когда использовать
+**Возможные значения:**
 
-- **Индикаторы присутствия**: Для отображения статуса онлайн/офлайн или состояний активности
-- **Маркеры уведомлений**: Для обозначения новых сообщений, обновлений или предупреждений без конкретных чисел
-- **Точки статуса**: Для отображения простых состояний включено/выключено или активно/неактивно
-- **Минималистичный дизайн**: Когда пространство ограничено и нужно только базовое обозначение
+- `true` — отображает Badge как точечный индикатор
+- `false` — отображает Badge в стандартном режиме с контентом (по умолчанию)
 
-### Визуальные характеристики
+Создает минималистичный визуальный маркер для индикации состояний, активности или уведомлений без отображения конкретных значений. Идеально подходит для индикаторов присутствия пользователей (онлайн/оффлайн), маркеров непрочитанных уведомлений и статусных точек на элементах интерфейса. При активации свойства `dot` любое текстовое содержимое или числовые значения игнорируются, отображается только цветовой индикатор.
 
-- **Компактный размер**: Занимает минимальное пространство, сохраняя видимость
-- **Без текстового содержимого**: Чистый визуальный индикатор без меток или цифр
-- **Аккуратный внешний вид**: Простая круглая форма, которая органично интегрируется
-- **Фокус на состоянии**: Подчеркивает статус, а не конкретную информацию
+```html
+<!-- Стандартный Badge с контентом -->
+<Badge label="5" />
+
+<!-- Точечный индикатор -->
+<Badge dot />
+
+<!-- Точечный индикатор статуса онлайн -->
+<Badge dot :selected="isOnline" overlap="circular" />
+```

package/src/media/mdx/Badge/outline.en.mdx

@@ -1,17 +1,16 @@
-## Outline Badge
+## Outline badges (outline)
 
-The outline variant provides a subtle badge style with transparent background and visible border, perfect for secondary information that needs to be noticeable but not dominant.
+The Badge component supports outline mode via the `outline` property. In this mode, badges have a minimalist visual style with transparent background and colored border:
 
-### When to use
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance when displaying secondary information
+- **Subtle presence** - less visually prominent than filled variants
+- **Flexible adaptation** - works well with various background colors and themes
 
-- **Secondary information**: When you need to display supplementary data without overwhelming the main content
-- **Status indicators**: For showing neutral or informational states that don't require immediate attention
-- **Grouping elements**: To categorize or tag content in a non-intrusive way
-- **Light theme compatibility**: When working with light backgrounds where solid badges might be too heavy
+Outline mode is especially useful for creating secondary indicators, informational labels, and status markers that should be noticeable but not dominant in the interface's visual hierarchy.
 
-### Visual characteristics
-
-- **Transparent background**: Maintains the underlying design while adding informational value
-- **Visible border**: Uses border styling to define the badge boundaries
-- **Subtle presence**: Less visually prominent than primary or secondary filled variants
-- **Flexible appearance**: Adapts well to different background colors and themes
+```html
+<Badge outline overlap="static">99+</Badge>
+<Badge outline overlap="static" icon="info">Info</Badge>
+<Badge outline dot overlap="static"/>
+```

package/src/media/mdx/Badge/outline.ru.mdx

@@ -1,17 +1,16 @@
-## Outline Badge
+## Контурные бейджи (outline)
 
-Контурный вариант обеспечивает тонкий стиль бейджа с прозрачным фоном и видимой границей, идеально подходящий для второстепенной информации, которая должна быть заметной, но не доминирующей.
+Компонент Badge поддерживает контурный режим через свойство `outline`. В этом режиме бейджи имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
 
-### Когда использовать
+- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
+- **Прозрачный фон** - поддерживает чистый внешний вид при отображении второстепенной информации
+- **Тонкое присутствие** - менее визуально заметный, чем заполненные варианты
+- **Гибкая адаптация** - хорошо работает с различными цветами фона и темами
 
-- **Второстепенная информация**: Когда нужно отобразить дополнительные данные, не перегружая основной контент
-- **Индикаторы статуса**: Для отображения нейтральных или информационных состояний, не требующих немедленного внимания
-- **Группировка элементов**: Для категоризации или маркировки контента ненавязчивым способом
-- **Совместимость со светлыми темами**: При работе со светлыми фонами, где сплошные бейджи могут быть слишком тяжелыми
+Outline режим особенно полезен для создания второстепенных индикаторов, информационных меток и статусных маркеров, которые должны быть заметными, но не доминирующими в визуальной иерархии интерфейса.
 
-### Визуальные характеристики
-
-- **Прозрачный фон**: Сохраняет базовый дизайн, добавляя информационную ценность
-- **Видимая граница**: Использует стилизацию границы для определения границ бейджа
-- **Тонкое присутствие**: Менее визуально заметный, чем основные или второстепенные заполненные варианты
-- **Гибкий внешний вид**: Хорошо адаптируется к различным цветам фона и темам
+```html
+<Badge outline overlap="static">99+</Badge>
+<Badge outline overlap="static" icon="info">Инфо</Badge>
+<Badge outline dot overlap="static"/>
+```

package/src/media/mdx/Badge/primary.en.mdx

@@ -1,16 +1,16 @@
-## Primary Badge
+## Primary badges (primary)
 
-The primary variant is the most prominent badge style, designed to draw attention and indicate high-priority information or status.
+The Badge component supports primary mode via the `primary` property. In this mode, badges have the most prominent visual style with bright brand colors:
 
-### When to use
+- **High contrast** - uses primary brand colors for maximum visibility
+- **Bold appearance** - draws attention to important information
+- **Enhanced visibility** - designed to stand out against various backgrounds
+- **Accessibility support** - strong contrast ratios for readability
 
-- **Critical notifications**: When you need to highlight urgent or important information
-- **Status indicators**: For showing active, enabled, or positive states
-- **Call-to-action elements**: When the badge serves as an interactive element requiring user attention
-- **Brand emphasis**: To maintain brand consistency with primary color schemes
+Primary mode is especially useful for creating critical notification indicators, active statuses, and high-priority markers that require immediate user attention in the interface.
 
-### Visual characteristics
-
-- **High contrast**: Uses primary brand colors with strong contrast ratios for accessibility
-- **Bold appearance**: More visually prominent than secondary or outline variants
-- **Enhanced visibility**: Designed to stand out against various background colors
+```html
+<Badge primary overlap="static">5</Badge>
+<Badge primary overlap="static" icon="warning">Important</Badge>
+<Badge primary dot overlap="static"/>
+```