You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */
60
60
href?: string;
61
-
/** Flag indicating if the label is an overflow label. */
62
-
isOverflowLabel?: boolean;
63
61
/** Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. */
64
62
onClick?: (event: React.MouseEvent)=>void;
65
63
/** Forwards the label content and className to rendered function. Use this prop for react router support.*/
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
9
9
import { Link } from '@reach/router';
10
+
import './Label.css';
10
11
11
12
## Examples
12
13
13
14
### Filled labels
14
15
15
16
```ts file="LabelFilled.tsx"
17
+
16
18
```
17
19
18
20
### Outlined labels
19
21
20
22
```ts file="LabelOutline.tsx"
23
+
21
24
```
22
25
23
26
### Compact labels
24
27
25
28
```ts file="LabelCompact.tsx"
29
+
26
30
```
27
31
28
32
### Label with router link
29
33
30
34
```ts file="LabelRouterLink.tsx"
35
+
31
36
```
32
37
33
38
### Editable labels
34
39
35
-
Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
40
+
Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
36
41
37
42
You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
38
43
39
44
```ts file="LabelEditable.tsx" isBeta
40
-
```
41
45
46
+
```
42
47
43
48
### Basic label group
44
-
Use a label group when you have multiple labels to display at once.
49
+
50
+
Use a label group when you have multiple labels to display at once.
45
51
46
52
```ts file="LabelGroupBasic.tsx"
53
+
47
54
```
48
55
49
56
### Label group with overflow
57
+
50
58
An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
51
59
52
60
```ts file="LabelGroupOverflow.tsx"
61
+
53
62
```
54
63
55
64
### Label group with categories
65
+
56
66
Use a category name to organize a set of labels
57
67
58
68
```ts file="LabelGroupCategory.tsx"
69
+
59
70
```
60
71
61
72
### Label group with removable categories
62
73
63
74
```ts file="LabelGroupCategoryRemovable.tsx"
75
+
64
76
```
65
77
66
78
### Vertical label group
79
+
67
80
Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).
0 commit comments