UNPKG

@kelvininc/ui-components

Version:

Kelvin UI Components

docs.kelvininc.com

kelvininc/ui-components

83 lines (54 loc) • 3.43 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- Auto Generated Below --> ## Usage ### React ```tsx import React from 'react'; import { KvTagStatus, ETagStatusType } from '@kelvininc/react-ui-components/client'; export const TagStatusExample: React.FC = () => ( <> {/*-- Default --*/} <KvTagStatus state={ETagState.Error} icon={EIconName.Error} label="Failed"/> {/*-- Without label --*/} <KvTagStatus state={ETagState.Error} icon={EIconName.Error} /> </> ); ``` ## Properties | Property | Attribute | Description | Type | Default | | -------------------- | --------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------- | ----------- | | `icon` _(required)_ | `icon` | (required) Defines the icon to be displayed. | `EIconName` | `undefined` | | `label` | `label` | (optional) Defines the content of the label. | `string` | `undefined` | | `state` _(required)_ | `state` | (required) Defines the color of the icon. | `ETagState.Error \| ETagState.Info \| ETagState.Success \| ETagState.Unknown \| ETagState.Warning` | `undefined` | ## Shadow Parts | Part | Description | | --------- | ------------------ | | `"label"` | The label element. | ## CSS Custom Properties | Name | Description | | -------------------------------------------- | ------------------------------------------------ | | `--tag-status-gap` | Tag status gap between label and icon in pixels. | | `--tag-status-icon-error-background-color` | Tag status icon error background color. | | `--tag-status-icon-error-color` | Tag status icon error color. | | `--tag-status-icon-info-background-color` | Tag status icon info background color. | | `--tag-status-icon-info-color` | Tag status icon info color. | | `--tag-status-icon-size` | Tag status icon width and height in pixels. | | `--tag-status-icon-success-background-color` | Tag status icon success background color. | | `--tag-status-icon-success-color` | Tag status icon success color. | | `--tag-status-icon-unknown-background-color` | Tag status icon unknown background color. | | `--tag-status-icon-unknown-color` | Tag status icon unknown color. | | `--tag-status-icon-warning-background-color` | Tag status icon warning background color. | | `--tag-status-icon-warning-color` | Tag status icon warning color. | | `--tag-status-label-color` | Tag status label text color. | ## Dependencies ### Used by - [kv-tab-navigation](../tab-navigation) ### Depends on - [kv-icon](../icon) ### Graph ```mermaid graph TD; kv-tag-status --> kv-icon kv-tab-navigation --> kv-tag-status style kv-tag-status fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------