@patternfly/react-core 6.5.0-prerelease.65 → 6.5.0-prerelease.66

package/src/components/Label/examples/LabelOutline.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor, LabelStatus } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelOutline: React.FunctionComponent = () => {
@@ -51,36 +51,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="blue">
+      <Label variant="outline" color={LabelColor.blue}>
         Blue
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.blue} icon={<CubeIcon />}>
         Blue icon
       </Label>
-      <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} onClose={() => Function.prototype}>
         Blue removable
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Blue icon removable
       </Label>
-      <Label variant="outline" color="blue" href="#outline">
+      <Label variant="outline" color={LabelColor.blue} href="#outline">
         Blue link
       </Label>
-      <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} href="#outline" onClose={() => Function.prototype}>
         Blue link removable
       </Label>{' '}
-      <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
+      <Label variant="outline" color={LabelColor.blue} onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
-      <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.blue}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
         Blue clickable removable
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.blue}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Blue label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -90,7 +101,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('blue')}
@@ -100,36 +111,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="green">
+      <Label variant="outline" color={LabelColor.green}>
         Green
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.green} icon={<CubeIcon />}>
         Green icon
       </Label>
-      <Label variant="outline" color="green" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} onClose={() => Function.prototype}>
         Green removable
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Green icon removable
       </Label>
-      <Label variant="outline" color="green" href="#outline">
+      <Label variant="outline" color={LabelColor.green} href="#outline">
         Green link
       </Label>
-      <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} href="#outline" onClose={() => Function.prototype}>
         Green link removable
       </Label>{' '}
-      <Label variant="outline" color="green" onClick={() => logColor('green')}>
+      <Label variant="outline" color={LabelColor.green} onClick={() => logColor('green')}>
         Green clickable
       </Label>
-      <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.green}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
         Green clickable removable
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.green}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Green label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -139,7 +161,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('green')}
@@ -149,33 +171,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="orange">
+      <Label variant="outline" color={LabelColor.orange}>
         Orange
       </Label>
-      <Label variant="outline" color="orange" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.orange} icon={<CubeIcon />}>
         Orange icon
       </Label>
-      <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} onClose={() => Function.prototype}>
         Orange removable
       </Label>
-      <Label variant="outline" color="orange" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange icon removable
       </Label>
-      <Label variant="outline" color="orange" href="#outline">
+      <Label variant="outline" color={LabelColor.orange} href="#outline">
         Orange link
       </Label>
-      <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} href="#outline" onClose={() => Function.prototype}>
         Orange link removable
       </Label>{' '}
-      <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
+      <Label variant="outline" color={LabelColor.orange} onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
-      <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.orange}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
         Orange clickable removable
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -184,7 +211,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -194,7 +221,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('orange')}
@@ -204,59 +231,70 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="red">
+      <Label variant="outline" color={LabelColor.red}>
         Red
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.red} icon={<CubeIcon />}>
         Red icon
       </Label>
-      <Label variant="outline" color="red" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} onClose={() => Function.prototype}>
         Red removable
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Red icon removable
       </Label>
-      <Label variant="outline" color="red" href="#outline">
+      <Label variant="outline" color={LabelColor.red} href="#outline">
         Red link
       </Label>
-      <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} href="#outline" onClose={() => Function.prototype}>
         Red link removable
       </Label>{' '}
-      <Label variant="outline" color="red" onClick={() => logColor('red')}>
+      <Label variant="outline" color={LabelColor.red} onClick={() => logColor('red')}>
         Red clickable
       </Label>
-      <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.red}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
         Red clickable removable
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.red}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Red label with icon that overflows
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="orangered">
+      <Label variant="outline" color={LabelColor.orangered}>
         Orange red
       </Label>
-      <Label variant="outline" color="orangered" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.orangered} icon={<CubeIcon />}>
         Orange red icon
       </Label>
-      <Label variant="outline" color="orangered" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} onClose={() => Function.prototype}>
         Orange red removable
       </Label>
-      <Label variant="outline" color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange red icon removable
       </Label>
-      <Label variant="outline" color="orangered" href="#outline">
+      <Label variant="outline" color={LabelColor.orangered} href="#outline">
         Orange red link
       </Label>
-      <Label variant="outline" color="orangered" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} href="#outline" onClose={() => Function.prototype}>
         Orange red link removable
       </Label>
-      <Label variant="outline" color="orangered" onClick={() => logColor('orangered')}>
+      <Label variant="outline" color={LabelColor.orangered} onClick={() => logColor('orangered')}>
         Orange red clickable
       </Label>
       <Label
         variant="outline"
-        color="orangered"
+        color={LabelColor.orangered}
         onClick={() => logColor('orangered')}
         onClose={() => Function.prototype}
       >
@@ -264,7 +302,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label
         variant="outline"
-        color="orangered"
+        color={LabelColor.orangered}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -273,33 +311,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="purple">
+      <Label variant="outline" color={LabelColor.purple}>
         Purple
       </Label>
-      <Label variant="outline" color="purple" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.purple} icon={<CubeIcon />}>
         Purple icon
       </Label>
-      <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} onClose={() => Function.prototype}>
         Purple removable
       </Label>
-      <Label variant="outline" color="purple" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Purple icon removable
       </Label>
-      <Label variant="outline" color="purple" href="#outline">
+      <Label variant="outline" color={LabelColor.purple} href="#outline">
         Purple link
       </Label>
-      <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} href="#outline" onClose={() => Function.prototype}>
         Purple link removable
       </Label>{' '}
-      <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
+      <Label variant="outline" color={LabelColor.purple} onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
-      <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.purple}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
         Purple clickable removable
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -308,7 +351,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -318,7 +361,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('purple')}
@@ -328,36 +371,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="teal">
+      <Label variant="outline" color={LabelColor.teal}>
         Teal
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.teal} icon={<CubeIcon />}>
         Teal icon
       </Label>
-      <Label variant="outline" color="teal" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} onClose={() => Function.prototype}>
         Teal removable
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Teal icon removable
       </Label>
-      <Label variant="outline" color="teal" href="#outline">
+      <Label variant="outline" color={LabelColor.teal} href="#outline">
         Teal link
       </Label>
-      <Label variant="outline" color="teal" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} href="#outline" onClose={() => Function.prototype}>
         Teal link removable
       </Label>{' '}
-      <Label variant="outline" color="teal" onClick={() => logColor('teal')}>
+      <Label variant="outline" color={LabelColor.teal} onClick={() => logColor('teal')}>
         Teal clickable
       </Label>
-      <Label variant="outline" color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.teal}
+        onClick={() => logColor('teal')}
+        onClose={() => Function.prototype}
+      >
         Teal clickable removable
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.teal}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Teal label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -367,7 +421,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('teal')}
@@ -377,33 +431,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="yellow">
+      <Label variant="outline" color={LabelColor.yellow}>
         Yellow
       </Label>
-      <Label variant="outline" color="yellow" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.yellow} icon={<CubeIcon />}>
         Yellow icon
       </Label>
-      <Label variant="outline" color="yellow" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} onClose={() => Function.prototype}>
         Yellow removable
       </Label>
-      <Label variant="outline" color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Yellow icon removable
       </Label>
-      <Label variant="outline" color="yellow" href="#outline">
+      <Label variant="outline" color={LabelColor.yellow} href="#outline">
         Yellow link
       </Label>
-      <Label variant="outline" color="yellow" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} href="#outline" onClose={() => Function.prototype}>
         Yellow link removable
       </Label>{' '}
-      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')}>
+      <Label variant="outline" color={LabelColor.yellow} onClick={() => logColor('yellow')}>
         Yellow clickable
       </Label>
-      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.yellow}
+        onClick={() => logColor('yellow')}
+        onClose={() => Function.prototype}
+      >
         Yellow clickable removable
       </Label>
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -412,7 +471,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -422,7 +481,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('yellow')}
@@ -435,117 +494,142 @@ export const LabelOutline: React.FunctionComponent = () => {
       <strong>Status:</strong>
       <br />
       <br />
-      <Label status="success" variant="outline">
+      <Label status={LabelStatus.success} variant="outline">
         Success
       </Label>
-      <Label status="success" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} variant="outline" onClose={() => Function.prototype}>
         Success removable
       </Label>
-      <Label status="success" variant="outline" href="#filled">
+      <Label status={LabelStatus.success} variant="outline" href="#filled">
         Success link
       </Label>
-      <Label status="success" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Success link removable
       </Label>
-      <Label status="success" variant="outline" onClick={() => logColor('success')}>
+      <Label status={LabelStatus.success} variant="outline" onClick={() => logColor('success')}>
         Success clickable
       </Label>
-      <Label status="success" variant="outline" onClick={() => logColor('success')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.success}
+        variant="outline"
+        onClick={() => logColor('success')}
+        onClose={() => Function.prototype}
+      >
         Success clickable removable
       </Label>
-      <Label status="success" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.success} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Success label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="warning" variant="outline">
+      <Label status={LabelStatus.warning} variant="outline">
         Warning
       </Label>
-      <Label status="warning" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} variant="outline" onClose={() => Function.prototype}>
         Warning removable
       </Label>
-      <Label status="warning" variant="outline" href="#filled">
+      <Label status={LabelStatus.warning} variant="outline" href="#filled">
         Warning link
       </Label>
-      <Label status="warning" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Warning link removable
       </Label>
-      <Label status="warning" variant="outline" onClick={() => logColor('warning')}>
+      <Label status={LabelStatus.warning} variant="outline" onClick={() => logColor('warning')}>
         Warning clickable
       </Label>
-      <Label status="warning" variant="outline" onClick={() => logColor('warning')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.warning}
+        variant="outline"
+        onClick={() => logColor('warning')}
+        onClose={() => Function.prototype}
+      >
         Warning clickable removable
       </Label>
-      <Label status="warning" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.warning} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Warning label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="danger" variant="outline">
+      <Label status={LabelStatus.danger} variant="outline">
         Danger
       </Label>
-      <Label status="danger" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} variant="outline" onClose={() => Function.prototype}>
         Danger removable
       </Label>
-      <Label status="danger" variant="outline" href="#filled">
+      <Label status={LabelStatus.danger} variant="outline" href="#filled">
         Danger link
       </Label>
-      <Label status="danger" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Danger link removable
       </Label>
-      <Label status="danger" variant="outline" onClick={() => logColor('danger')}>
+      <Label status={LabelStatus.danger} variant="outline" onClick={() => logColor('danger')}>
         Danger clickable
       </Label>
-      <Label status="danger" variant="outline" onClick={() => logColor('danger')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.danger}
+        variant="outline"
+        onClick={() => logColor('danger')}
+        onClose={() => Function.prototype}
+      >
         Danger clickable removable
       </Label>
-      <Label status="danger" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.danger} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Danger label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="info" variant="outline">
+      <Label status={LabelStatus.info} variant="outline">
         Info
       </Label>
-      <Label status="info" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} variant="outline" onClose={() => Function.prototype}>
         Info removable
       </Label>
-      <Label status="info" variant="outline" href="#filled">
+      <Label status={LabelStatus.info} variant="outline" href="#filled">
         Info link
       </Label>
-      <Label status="info" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Info link removable
       </Label>
-      <Label status="info" variant="outline" onClick={() => logColor('info')}>
+      <Label status={LabelStatus.info} variant="outline" onClick={() => logColor('info')}>
         Info clickable
       </Label>
-      <Label status="info" variant="outline" onClick={() => logColor('info')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.info}
+        variant="outline"
+        onClick={() => logColor('info')}
+        onClose={() => Function.prototype}
+      >
         Info clickable removable
       </Label>
-      <Label status="info" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.info} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Info label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="custom" variant="outline">
+      <Label status={LabelStatus.custom} variant="outline">
         Custom
       </Label>
-      <Label status="custom" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} variant="outline" onClose={() => Function.prototype}>
         Custom removable
       </Label>
-      <Label status="custom" variant="outline" href="#filled">
+      <Label status={LabelStatus.custom} variant="outline" href="#filled">
         Custom link
       </Label>
-      <Label status="custom" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Custom link removable
       </Label>
-      <Label status="custom" variant="outline" onClick={() => logColor('custom')}>
+      <Label status={LabelStatus.custom} variant="outline" onClick={() => logColor('custom')}>
         Custom clickable
       </Label>
-      <Label status="custom" variant="outline" onClick={() => logColor('custom')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.custom}
+        variant="outline"
+        onClick={() => logColor('custom')}
+        onClose={() => Function.prototype}
+      >
         Custom clickable removable
       </Label>
-      <Label status="custom" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.custom} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Custom label with text that overflows
       </Label>
     </Fragment>