diff --git a/webapp/src/components/kanban/kanban.scss b/webapp/src/components/kanban/kanban.scss
index fad242891..89094b023 100644
--- a/webapp/src/components/kanban/kanban.scss
+++ b/webapp/src/components/kanban/kanban.scss
@@ -35,6 +35,12 @@
                 background-color: rgba(var(--body-color), 0.1);
             }
         }
+
+        .Label{
+            .Editable {
+                background: transparent;
+            }
+        }
     }
 
 
diff --git a/webapp/src/components/kanban/kanbanColumnHeader.tsx b/webapp/src/components/kanban/kanbanColumnHeader.tsx
index 503dbb1eb..11354434b 100644
--- a/webapp/src/components/kanban/kanbanColumnHeader.tsx
+++ b/webapp/src/components/kanban/kanbanColumnHeader.tsx
@@ -17,6 +17,7 @@ import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import Editable from '../../widgets/editable'
+import Label from '../../widgets/label'
 
 type Props = {
     boardTree: BoardTree
@@ -72,8 +73,7 @@ export default function KanbanColumnHeader(props: Props): JSX.Element {
             }}
         >
             {!group.option.id &&
-                <div
-                    className='octo-label'
+                <Label
                     title={intl.formatMessage({
                         id: 'BoardComponent.no-property-title',
                         defaultMessage: 'Items with an empty {property} property will go here. This column cannot be removed.',
@@ -86,24 +86,25 @@ export default function KanbanColumnHeader(props: Props): JSX.Element {
                             property: boardTree.groupByProperty!.name,
                         }}
                     />
-                </div>}
+                </Label>}
             {group.option.id &&
-                <Editable
-                    className={`octo-label ${group.option.color}`}
-                    value={groupTitle}
-                    placeholderText='New Select'
-                    onChange={setGroupTitle}
-                    onSave={() => {
-                        if (groupTitle.trim() === '') {
+                <Label color={group.option.color}>
+                    <Editable
+                        value={groupTitle}
+                        placeholderText='New Select'
+                        onChange={setGroupTitle}
+                        onSave={() => {
+                            if (groupTitle.trim() === '') {
+                                setGroupTitle(group.option.value)
+                            }
+                            props.propertyNameChanged(group.option, groupTitle)
+                        }}
+                        onCancel={() => {
                             setGroupTitle(group.option.value)
-                        }
-                        props.propertyNameChanged(group.option, groupTitle)
-                    }}
-                    onCancel={() => {
-                        setGroupTitle(group.option.value)
-                    }}
-                    readonly={props.readonly}
-                />}
+                        }}
+                        readonly={props.readonly}
+                    />
+                </Label>}
             <Button>{`${group.cards.length}`}</Button>
             <div className='octo-spacer'/>
             {!props.readonly &&
diff --git a/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx b/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx
index d549233f5..cfe1926bc 100644
--- a/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx
+++ b/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx
@@ -11,6 +11,7 @@ import Button from '../../widgets/buttons/button'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import ShowIcon from '../../widgets/icons/show'
+import Label from '../../widgets/label'
 
 type Props = {
     boardTree: BoardTree
@@ -60,12 +61,12 @@ export default function KanbanHiddenColumnItem(props: Props): JSX.Element {
             <MenuWrapper
                 disabled={props.readonly}
             >
-                <div
+                <Label
                     key={group.option.id || 'empty'}
-                    className={`octo-label ${group.option.color}`}
+                    color={group.option.color}
                 >
                     {group.option.value}
-                </div>
+                </Label>
                 <Menu>
                     <Menu.Text
                         id='show'
diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 4a3a84114..5267fe73e 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -11,6 +11,7 @@ import {Utils} from '../utils'
 import {BoardTree} from '../viewModel/boardTree'
 import Editable from '../widgets/editable'
 import ValueSelector from '../widgets/valueSelector'
+import Label from '../widgets/label'
 
 type Props = {
     boardTree?: BoardTree
@@ -35,18 +36,13 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             propertyColorCssClassName = cardPropertyValue.color
         }
 
-        let className = 'octo-propertyvalue octo-label'
-        if (!displayValue) {
-            className += ' empty'
-        }
-
         if (readOnly || !boardTree) {
             return (
                 <div
-                    className={`${className} ${propertyColorCssClassName}`}
+                    className='octo-property-value'
                     tabIndex={0}
                 >
-                    {finalDisplayValue}
+                    <Label color={displayValue ? propertyColorCssClassName : 'empty'}>{finalDisplayValue}</Label>
                 </div>
             )
         }
diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss
index 545df26c9..bad0d2a5c 100644
--- a/webapp/src/components/table/table.scss
+++ b/webapp/src/components/table/table.scss
@@ -94,7 +94,7 @@
                 overflow: hidden;
             }
 
-            .octo-label {
+            .Label {
                 color: rgba(var(--body-color), 0.6);
             }
         }
diff --git a/webapp/src/components/table/table.tsx b/webapp/src/components/table/table.tsx
index 60555b09d..a244cf909 100644
--- a/webapp/src/components/table/table.tsx
+++ b/webapp/src/components/table/table.tsx
@@ -13,6 +13,7 @@ import {BoardTree} from '../../viewModel/boardTree'
 import SortDownIcon from '../../widgets/icons/sortDown'
 import SortUpIcon from '../../widgets/icons/sortUp'
 import MenuWrapper from '../../widgets/menuWrapper'
+import Label from '../../widgets/label'
 
 import {HorizontalGrip} from '../horizontalGrip'
 
@@ -69,15 +70,13 @@ class Table extends React.Component<Props, State> {
                         style={{overflow: 'unset', width: this.columnWidth(Constants.titleColumnId)}}
                     >
                         <MenuWrapper disabled={this.props.readonly}>
-                            <div
-                                className='octo-label'
-                            >
+                            <Label>
                                 <FormattedMessage
                                     id='TableComponent.name'
                                     defaultMessage='Name'
                                 />
                                 {titleSortIcon}
-                            </div>
+                            </Label>
                             <TableHeaderMenu
                                 boardTree={boardTree}
                                 templateId={Constants.titleColumnId}
@@ -157,7 +156,6 @@ class Table extends React.Component<Props, State> {
                                         disabled={this.props.readonly}
                                     >
                                         <div
-                                            className='octo-label'
                                             draggable={!this.props.readonly}
                                             onDragStart={() => {
                                                 this.draggedHeaderTemplate = template
@@ -166,8 +164,10 @@ class Table extends React.Component<Props, State> {
                                                 this.draggedHeaderTemplate = undefined
                                             }}
                                         >
-                                            {template.name}
-                                            {sortIcon}
+                                            <Label>
+                                                {template.name}
+                                                {sortIcon}
+                                            </Label>
                                         </div>
                                         <TableHeaderMenu
                                             boardTree={boardTree}
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index 14375eb6b..f0e71f02f 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -128,19 +128,6 @@ button {
 	background-color: rgba(128, 192, 255, 0.4);
 }
 
-.octo-label {
-	display: inline-flex;
-	align-items: center;
-	padding: 2px 8px;
-	border-radius: 3px;
-	line-height: 20px;
-	color: rgba(var(--body-color), .8);
-	white-space: nowrap;
-	text-transform: uppercase;
-	font-weight: 600;
-	font-size: 13px;
-}
-
 .octo-spacer {
 	flex: 1;
 }
diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss
new file mode 100644
index 000000000..13dbbeb44
--- /dev/null
+++ b/webapp/src/widgets/label.scss
@@ -0,0 +1,12 @@
+.Label {
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 8px;
+	border-radius: 3px;
+	line-height: 20px;
+	color: rgba(var(--body-color), .8);
+	white-space: nowrap;
+	text-transform: uppercase;
+	font-weight: 600;
+	font-size: 13px;
+}
diff --git a/webapp/src/widgets/label.tsx b/webapp/src/widgets/label.tsx
new file mode 100644
index 000000000..b0f4745fd
--- /dev/null
+++ b/webapp/src/widgets/label.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './label.scss'
+
+type Props = {
+    color?: string
+    title?: string
+    children: React.ReactNode
+}
+
+// Switch is an on-off style switch / checkbox
+function Label(props: Props): JSX.Element {
+    return (
+        <span
+            className={`Label ${props.color || 'empty'}`}
+            title={props.title}
+        >
+            {props.children}
+        </span>
+    )
+}
+
+export default React.memo(Label)
diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss
index c5cd7a77b..62c777ea9 100644
--- a/webapp/src/widgets/valueSelector.scss
+++ b/webapp/src/widgets/valueSelector.scss
@@ -7,7 +7,7 @@
         background-color: rgba(var(--body-color), 0.1),
     }
 
-    > .octo-label {
+    > .Label {
         margin: 0 10px;
         &.empty {
             color: rgba(var(--body-color), 0.6);
@@ -17,7 +17,7 @@
     .value-menu-option {
         display: flex;
         width: 100%;
-        .octo-label-container {
+        .label-container {
             flex-grow: 1;
         }
         .MenuWrapper {
diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index d64586e59..4bfb7c070 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -14,6 +14,7 @@ import MenuWrapper from './menuWrapper'
 import IconButton from './buttons/iconButton'
 import OptionsIcon from './icons/options'
 import DeleteIcon from './icons/delete'
+import Label from './label'
 
 import './valueSelector.scss'
 
@@ -39,12 +40,12 @@ type LabelProps = {
 const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
     const {option, meta} = props
     if (meta.context === 'value') {
-        return <span className={`octo-label ${option.color}`} >{option.value}</span>
+        return <Label color={option.color}>{option.value}</Label>
     }
     return (
         <div className='value-menu-option'>
-            <div className='octo-label-container'>
-                <div className={`octo-label ${option.color}`}>{option.value}</div>
+            <div className='label-container'>
+                <Label color={option.color}>{option.value}</Label>
             </div>
             <MenuWrapper stopPropagationOnToggle={true}>
                 <IconButton icon={<OptionsIcon/>}/>
@@ -79,9 +80,9 @@ function ValueSelector(props: Props): JSX.Element {
                 className='ValueSelector'
                 onClick={() => setActivated(true)}
             >
-                <span className={`octo-label ${props.value ? props.value.color : 'empty'}`}>
+                <Label color={props.value ? props.value.color : 'empty'}>
                     {props.value ? props.value.value : props.emptyValue}
-                </span>
+                </Label>
             </div>
         )
     }