@kelvininc/ui-components
Version:
Kelvin UI Components
106 lines (76 loc) • 4.56 kB
Markdown
<!-- Auto Generated Below -->
## Usage
### React
```tsx
import React from 'react';
import { KvBadge, EBadgeState } from '@kelvininc/react-ui-components';
export const BadgeExample: React.FC = () => (
<>
{/*-- Default --*/}
<KvBadge>Badge</KvBadge>
{/*-- Info --*/}
<KvBadge state={EBadgeState.Info}>Info Badge</KvBadge>
{/*-- Warning --*/}
<KvBadge state={EBadgeState.Warning}>Warning Badge</KvBadge>
{/*-- Error --*/}
<KvBadge state={EBadgeState.Error}>Error Badge</KvBadge>
{/*-- Success --*/}
<KvBadge state={EBadgeState.Success}>Success Badge</KvBadge>
</>x
);
```
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------ |
| `state` | `state` | (optional) Defines the badge state. | `EBadgeState.Error \| EBadgeState.Info \| EBadgeState.None \| EBadgeState.Success \| EBadgeState.Warning` | `EBadgeState.None` |
## Shadow Parts
| Part | Description |
| --------- | ----------- |
| `"badge"` | The badge. |
## CSS Custom Properties
| Name | Description |
| ---------------------------------- | ----------------------------------------------- |
| `--badge-background-color-error` | Badge's background color when state is error. |
| `--badge-background-color-error` | Badge's background color when state is error. |
| `--badge-background-color-info` | Badge's background color when state is info. |
| `--badge-background-color-info` | Badge's background color when state is info. |
| `--badge-background-color-none` | Badge's background color when state is none. |
| `--badge-background-color-none` | Badge's background color when state is none. |
| `--badge-background-color-success` | Badge's background color when state is success. |
| `--badge-background-color-success` | Badge's background color when state is success. |
| `--badge-background-color-warning` | Badge's background color when state is warning. |
| `--badge-background-color-warning` | Badge's background color when state is warning. |
| `--badge-height` | Badge's height. |
| `--badge-height` | Badge's height. |
| `--badge-max-width` | Badge's maximum width. |
| `--badge-max-width` | Badge's maximum width. |
| `--badge-min-width` | Badge's minimum width. |
| `--badge-min-width` | Badge's minimum width. |
| `--badge-text-color-error` | Badge's text color when state is error. |
| `--badge-text-color-error` | Badge's text color when state is error. |
| `--badge-text-color-info` | Badge's text color when state is info. |
| `--badge-text-color-info` | Badge's text color when state is info. |
| `--badge-text-color-none` | Badge's text color when state is none. |
| `--badge-text-color-none` | Badge's text color when state is none. |
| `--badge-text-color-success` | Badge's text color when state is success. |
| `--badge-text-color-success` | Badge's text color when state is success. |
| `--badge-text-color-warning` | Badge's text color when state is warning. |
| `--badge-text-color-warning` | Badge's text color when state is warning. |
| `--badge-warning-text-color` | Badge's text color when state is warning. |
| `--badge-warning-text-color` | Badge's text color when state is warning. |
| `--badge-width` | Badge's width. |
| `--badge-width` | Badge's width. |
## Dependencies
### Used by
- [kv-action-button-icon](../action-button-icon)
- [kv-text-field](../text-field)
- [kv-tree-item](../tree-item)
### Graph
```mermaid
graph TD;
kv-action-button-icon --> kv-badge
kv-text-field --> kv-badge
kv-tree-item --> kv-badge
style kv-badge fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------