diff --git a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
index 82c6fbaba19..7b0381ee2ac 100644
--- a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
+++ b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.close"
         type="button"
@@ -75,6 +76,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.maximize"
         type="button"
@@ -115,6 +117,7 @@ exports[`ActionHeader should render an action header with back and close buttons
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.close"
         type="button"
@@ -141,6 +144,7 @@ exports[`ActionHeader should render an action header with back and close buttons
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.back"
         type="button"
@@ -174,6 +178,7 @@ exports[`ActionHeader should render an action header with back button and title
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.back"
         type="button"
@@ -205,6 +210,7 @@ exports[`ActionHeader should render an action header with close button and title
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.close"
         type="button"
@@ -233,6 +239,7 @@ exports[`ActionHeader should render an action header with custom button and titl
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     onClick={[Function]}
     text="Custom Button"
     type="button"
@@ -274,6 +281,7 @@ exports[`ActionHeader should render an action header with maximize button and ti
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.maximize"
         type="button"
@@ -308,6 +316,7 @@ exports[`ActionHeader should render an action header with minimize button and ti
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         text="Terra.actionHeader.minimize"
         type="button"
@@ -334,6 +343,7 @@ exports[`ActionHeader should render an action header with multiple custom button
       isDisabled={false}
       isIconOnly={false}
       isReversed={false}
+      isSelectable={false}
       onClick={[Function]}
       text="Custom Button"
       type="button"
@@ -345,6 +355,7 @@ exports[`ActionHeader should render an action header with multiple custom button
       isDisabled={false}
       isIconOnly={false}
       isReversed={false}
+      isSelectable={false}
       onClick={[Function]}
       text="Custom Button"
       type="button"
@@ -379,6 +390,7 @@ exports[`ActionHeader should render an action header with next and previous butt
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.actionHeader.previous"
           type="button"
@@ -397,6 +409,7 @@ exports[`ActionHeader should render an action header with next and previous butt
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.actionHeader.next"
           type="button"
@@ -444,6 +457,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
           isDisabled={true}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           text="Terra.actionHeader.previous"
           type="button"
           variant="utility"
@@ -461,6 +475,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.actionHeader.next"
           type="button"
@@ -498,6 +513,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.actionHeader.previous"
           type="button"
@@ -516,6 +532,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
           isDisabled={true}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           text="Terra.actionHeader.next"
           type="button"
           variant="utility"
diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
index 4f73464c3b7..9556ae45764 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -317,6 +317,7 @@ exports[`Alert of type success with an action button text content should render
         isDisabled={false}
         isIconOnly={false}
         isReversed={false}
+        isSelectable={false}
         onClick={[MockFunction]}
         text="Action"
         type="button"
@@ -967,6 +968,7 @@ exports[`Dismissible Alert of type custom with action button, custom title and t
         isDisabled={false}
         isIconOnly={false}
         isReversed={false}
+        isSelectable={false}
         onClick={[MockFunction]}
         text="Action"
         type="button"
@@ -979,6 +981,7 @@ exports[`Dismissible Alert of type custom with action button, custom title and t
         isDisabled={false}
         isIconOnly={false}
         isReversed={false}
+        isSelectable={false}
         onClick={[MockFunction]}
         text="Terra.alert.dismiss"
         type="button"
@@ -1040,6 +1043,7 @@ exports[`Dismissible Alert that includes actions section should render an alert
         isDisabled={false}
         isIconOnly={false}
         isReversed={false}
+        isSelectable={false}
         onClick={[MockFunction]}
         text="Terra.alert.dismiss"
         type="button"
diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
index f8ffb8e9d12..fb0e4b3177c 100644
--- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
+++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
@@ -35,6 +35,7 @@ exports[`correctly applies the theme context className 1`] = `
           isDisabled={false}
           isIconOnly={false}
           isReversed={false}
+          isSelectable={false}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -88,6 +89,7 @@ exports[`correctly applies the theme context className 1`] = `
           isDisabled={false}
           isIconOnly={false}
           isReversed={false}
+          isSelectable={false}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
index 01a37b5abaf..0afc28da99a 100644
--- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
+++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
@@ -20,6 +20,7 @@ exports[`correctly applies the theme context className 1`] = `
       isDisabled={false}
       isIconOnly={false}
       isReversed={false}
+      isSelectable={false}
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -65,6 +66,7 @@ exports[`should render a default component 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -84,6 +86,7 @@ exports[`should render as disabled 1`] = `
   isDisabled={true}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -108,6 +111,7 @@ exports[`should render with icon only 1`] = `
   isDisabled={false}
   isIconOnly={true}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -127,6 +131,7 @@ exports[`should render with onBlur 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -146,6 +151,7 @@ exports[`should render with onClick 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
@@ -166,6 +172,7 @@ exports[`should render with onFocus 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -185,6 +192,7 @@ exports[`should render with onKeyDown 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
@@ -204,6 +212,7 @@ exports[`should render with onKeyUp 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx
index 52ec953fdf0..f5865468869 100644
--- a/packages/terra-button/src/Button.jsx
+++ b/packages/terra-button/src/Button.jsx
@@ -101,6 +101,16 @@ const propTypes = {
    * Sets the button variant. One of `neutral`,  `emphasis`, `ghost`, `de-emphasis`, `action` or `utility`.
    */
   variant: PropTypes.oneOf([ButtonVariants.NEUTRAL, ButtonVariants.EMPHASIS, ButtonVariants.GHOST, ButtonVariants['DE-EMPHASIS'], ButtonVariants.ACTION, ButtonVariants.UTILITY]),
+  /**
+   * @private
+   * Whether or not the button can be selected (toggleable button).
+   */
+  isSelectable: PropTypes.bool,
+  /**
+   * @private
+   * Callback function when the state changes. Parameters are (event, toggleState).
+   */
+  onChange: PropTypes.func,
 };
 
 const defaultProps = {
@@ -113,18 +123,20 @@ const defaultProps = {
   title: undefined,
   type: ButtonTypes.BUTTON,
   variant: ButtonVariants.NEUTRAL,
+  isSelectable: false,
 };
 
 class Button extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { active: false, focused: false };
+    this.state = { active: false, focused: false, isSelected: false };
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleOnBlur = this.handleOnBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleOnChange = this.handleOnChange.bind(this);
 
     this.shouldShowFocus = true;
   }
@@ -144,6 +156,12 @@ class Button extends React.Component {
     }
   }
 
+  handleOnChange(event) {
+    if (this.props.onChange && this.props.isSelectable) {
+      this.props.onChange(event, this.state.isSelected);
+    }
+  }
+
   handleClick(event) {
     // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#Clicking_and_focus
     // Button on Firefox, Safari and IE running on OS X does not receive focus when clicked.
@@ -154,6 +172,8 @@ class Button extends React.Component {
       this.shouldShowFocus = true;
     }
 
+    this.handleOnChange(event);
+
     if (this.props.onClick) {
       this.props.onClick(event);
     }
@@ -174,7 +194,7 @@ class Button extends React.Component {
 
     // Add focus styles for keyboard navigation
     if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
-      this.setState({ focused: true });
+      this.setState(prevState => ({ focused: true, isSelected: !prevState.isSelected }));
     }
 
     if (this.props.onKeyDown) {
@@ -212,6 +232,7 @@ class Button extends React.Component {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(event);
     }
+    this.setState(prevState => ({ isSelected: !prevState.isSelected }));
 
     // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#Notes
     // If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement.
@@ -239,6 +260,8 @@ class Button extends React.Component {
       onKeyUp,
       refCallback,
       title,
+      isSelectable,
+      onChange,
       ...customProps
     } = this.props;
 
@@ -255,6 +278,7 @@ class Button extends React.Component {
         { compact: isCompact },
         { 'is-active': this.state.active && !isDisabled },
         { 'is-focused': this.state.focused && !isDisabled },
+        { 'is-selected': isSelectable && this.state.isSelected && !isDisabled },
         theme.className,
       ]),
       customProps.className,
@@ -306,6 +330,8 @@ class Button extends React.Component {
     if (href) {
       ComponentType = 'a';
       customProps.role = 'button';
+    } else if (isSelectable) {
+      customProps.role = 'checkbox';
     }
 
     return (
@@ -326,6 +352,7 @@ class Button extends React.Component {
         onFocus={this.handleFocus}
         href={href}
         ref={refCallback}
+        aria-checked={isSelectable ? this.state.isSelected : undefined}
       >
         {buttonLabel}
       </ComponentType>
diff --git a/packages/terra-button/src/Button.module.scss b/packages/terra-button/src/Button.module.scss
index 8469583e890..71e64537251 100644
--- a/packages/terra-button/src/Button.module.scss
+++ b/packages/terra-button/src/Button.module.scss
@@ -78,6 +78,35 @@
       opacity: var(--terra-button-disabled-opacity, 0.3);
       pointer-events: none; // prevent pointer interaction for anchor elements
     }
+
+    &.is-selected.is-focused {
+      background-color: var(--terra-button-selected-and-focus-background-color, #52585b);
+      border-color: var(--terra-button-selected-and-focus-border-color, #52585b);
+      box-shadow: var(--terra-button-selected-and-focus-box-shadow, 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35));
+      color: var(--terra-button-selected-and-focus-color, #fff);
+    }
+
+    &.is-selected {
+      background-color: var(--terra-button-selected-background-color, #52585b);
+      border-color: var(--terra-button-selected-border-color, #52585b);
+      box-shadow: var(--terra-button-selected-box-shadow);
+      color: var(--terra-button-selected-color, #fff);
+    }
+
+    &:active.is-selected,
+    &:active {
+      background-color: var(--terra-button-active-background-color, #52585b);
+      border-color: var(--terra-button-active-border-color, #52585b);
+      box-shadow: var(--terra-button-active-box-shadow);
+      color: var(--terra-button-active-color, #fff);
+    }
+
+    &:hover.is-selected {
+      background-color: var(--terra-button-selected-and-hover-background-color, #40474a);
+      border-color: var(--terra-button-selected-and-hover-border-color, #40474a);
+      box-shadow: var(--terra-button-selected-and-hover-box-shadow);
+      color: var(--terra-button-selected-and-hover-color, #fff);
+    }
   }
 
   .button-label-mac {
diff --git a/packages/terra-button/src/clinical-lowlight-theme/Button.module.scss b/packages/terra-button/src/clinical-lowlight-theme/Button.module.scss
index 780750b5203..99e0b06f466 100644
--- a/packages/terra-button/src/clinical-lowlight-theme/Button.module.scss
+++ b/packages/terra-button/src/clinical-lowlight-theme/Button.module.scss
@@ -190,5 +190,26 @@
     --terra-button-hover-background-color-utility: transparent;
     --terra-button-hover-border-color-utility: transparent;
     --terra-button-hover-color-utility: #b2b5b6;
+
+    // isSelected button
+    --terra-button-selected-background-color: #1a2023;
+    --terra-button-selected-border-color: #181b1d;
+    --terra-button-selected-box-shadow: none;
+    --terra-button-selected-color: #9b9b9b;
+
+    --terra-button-selected-and-focus-background-color: #1a2023;
+    --terra-button-selected-and-focus-border-color: #181b1d;
+    --terra-button-selected-and-focus-box-shadow: 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35);
+    --terra-button-selected-and-focus-color: #9b9b9b;
+
+    --terra-button-active-background-color: #1a2023;
+    --terra-button-active-border-color: #181b1d;
+    --terra-button-active-box-shadow: none;
+    --terra-button-active-color: #9b9b9b;
+
+    --terra-button-selected-and-hover-background-color: #121517;
+    --terra-button-selected-and-hover-border-color: #181b1d;
+    --terra-button-selected-and-hover-box-shadow: none;
+    --terra-button-selected-and-hover-color: #9b9b9b;
   }
 }
diff --git a/packages/terra-button/src/orion-fusion-theme/Button.module.scss b/packages/terra-button/src/orion-fusion-theme/Button.module.scss
index 300172853cf..b78a499bc91 100644
--- a/packages/terra-button/src/orion-fusion-theme/Button.module.scss
+++ b/packages/terra-button/src/orion-fusion-theme/Button.module.scss
@@ -190,5 +190,26 @@
     --terra-button-hover-background-color-utility: transparent;
     --terra-button-hover-border-color-utility: transparent;
     --terra-button-hover-color-utility: #004c76;
+
+    // isSelected button
+    --terra-button-selected-and-hover-background-color: #52585b;
+    --terra-button-selected-and-hover-border-color: #6f7477;
+    --terra-button-selected-and-hover-box-shadow: none;
+    --terra-button-selected-and-hover-color: #fff;
+
+    --terra-button-selected-and-focus-background-color: #52585b;
+    --terra-button-selected-and-focus-border-color: #6f7477;
+    --terra-button-selected-and-focus-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
+    --terra-button-selected-and-focus-color: #fff;
+
+    --terra-button-selected-background-color: #52585b;
+    --terra-button-selected-border-color: #6f7477;
+    --terra-button-selected-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
+    --terra-button-selected-color: #fff;
+
+    --terra-button-active-background-color: #52585b;
+    --terra-button-active-border-color: #6f7477;
+    --terra-button-active-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
+    --terra-button-active-color: #fff;
   }
 }
diff --git a/packages/terra-button/tests/jest/Button.test.jsx b/packages/terra-button/tests/jest/Button.test.jsx
index 2df2a4ad71b..57573a9cb81 100644
--- a/packages/terra-button/tests/jest/Button.test.jsx
+++ b/packages/terra-button/tests/jest/Button.test.jsx
@@ -263,4 +263,9 @@ it('correctly applies the theme context className', () => {
   );
   expect(button).toMatchSnapshot();
 });
+
+it('should render a selectable button', () => {
+  const button = shallow(<Button text="Selectable Button" isSelectable />);
+  expect(button).toMatchSnapshot();
+});
 /* eslint-enable react/forbid-dom-props */
diff --git a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
index c401315dcd9..a8b99e74d54 100644
--- a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
+++ b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
@@ -14,6 +14,7 @@ exports[`correctly applies the theme context className 1`] = `
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     text="neutral"
     type="button"
     variant="neutral"
@@ -51,6 +52,7 @@ exports[`should pass in refCallback as the ref prop of the input element 1`] = `
   isDisabled={false}
   isIconOnly={false}
   isReversed={false}
+  isSelectable={false}
   refCallback={
     [MockFunction] {
       "calls": Array [
@@ -367,6 +369,33 @@ exports[`should render a neutral button 1`] = `
 </button>
 `;
 
+exports[`should render a selectable button 1`] = `
+<button
+  aria-checked={false}
+  aria-disabled={false}
+  className="button neutral"
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  role="checkbox"
+  type="button"
+>
+  <span
+    className="button-label-win text-only"
+  >
+    <span
+      className=""
+    >
+      Selectable Button
+    </span>
+  </span>
+</button>
+`;
+
 exports[`should render a utility button 1`] = `
 <button
   aria-disabled={false}
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/selected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/selected-button.png
new file mode 100644
index 00000000000..ec758c10558
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/selected-button.png differ
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/unselected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/unselected-button.png
new file mode 100644
index 00000000000..562fc4815dd
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/unselected-button.png differ
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/selected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/selected-button.png
new file mode 100644
index 00000000000..9b3dc58a08e
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/selected-button.png differ
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/unselected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/unselected-button.png
new file mode 100644
index 00000000000..de0e9ce5ba6
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/unselected-button.png differ
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/selected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/selected-button.png
new file mode 100644
index 00000000000..0a225c7cf0e
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/selected-button.png differ
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/unselected-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/unselected-button.png
new file mode 100644
index 00000000000..5bb619db349
Binary files /dev/null and b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/unselected-button.png differ
diff --git a/packages/terra-button/tests/wdio/button-spec.js b/packages/terra-button/tests/wdio/button-spec.js
index 0f861a8ae77..0ec779b42da 100644
--- a/packages/terra-button/tests/wdio/button-spec.js
+++ b/packages/terra-button/tests/wdio/button-spec.js
@@ -255,4 +255,17 @@ Terra.describeViewports('Button', ['tiny'], () => {
       Terra.validates.element('programmatic re-enabled -Enabled Button is not focused', { selector: '#root' });
     });
   });
+
+  describe('Selectable button', () => {
+    it('displays unselected button', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/button/selectable-button');
+      Terra.validates.element('unselected-button');
+    });
+
+    it('displays selected button', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/button/selectable-button');
+      $('<button>').click();
+      Terra.validates.element('selected-button');
+    });
+  });
 });
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
index 68953bfbacf..4c684b22195 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
@@ -8,6 +8,7 @@ import ButtonOnClick from './example/ButtonOnClick?dev-site-example';
 import ButtonIcon from './example/ButtonIcon?dev-site-example';
 import ButtonVariant from './example/ButtonVariant?dev-site-example';
 import IconButtonVariant from './example/IconButtonVariant?dev-site-example';
+import ButtonIsSelected from './example/ButtonIsSelected?dev-site-example';
 
 import ButtonPropsTable from 'terra-button/lib/Button?dev-site-props-table';
 
@@ -59,6 +60,7 @@ import Button from 'terra-button';
 <ButtonDisabled title="Disabled" />
 <ButtonOnClick title="Click" />
 <ButtonIcon title="Icon" />
+<ButtonIsSelected title="Selectable" />
 
 ## Button Props
 <ButtonPropsTable />
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIsSelected.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIsSelected.jsx
new file mode 100644
index 00000000000..314ecad5ddb
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIsSelected.jsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Button from 'terra-button';
+import classNames from 'classnames/bind';
+import styles from './ButtonDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const ButtonIsSelected = () => {
+  const [text, setText] = useState('Unselected');
+
+  const handleSelection = (event, toggledState) => {
+    if (toggledState) {
+      setText('Selected');
+    } else {
+      setText('Unselected');
+    }
+  };
+
+  return (
+    <div>
+      <p>
+        Status:
+        {' '}
+        {text}
+      </p>
+      <Button text="Click Me" className={cx('button')} isSelectable onChange={handleSelection} />
+    </div>
+  );
+};
+
+export default ButtonIsSelected;
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/button/SelectableButton.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/button/SelectableButton.test.jsx
new file mode 100644
index 00000000000..c416673e9d0
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/test/button/SelectableButton.test.jsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Button from 'terra-button';
+import classNames from 'classnames/bind';
+import styles from './ButtonTestCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const SelectableButton = () => {
+  const [text, setText] = useState('Unselected');
+
+  const handleSelection = (event, toggledState) => {
+    if (toggledState) {
+      setText('Selected');
+    } else {
+      setText('Unselected');
+    }
+  };
+
+  return (
+    <div>
+      <p>
+        Status:
+        {' '}
+        {text}
+      </p>
+      <Button text="Click Me" className={cx('button')} isSelectable onChange={handleSelection} />
+    </div>
+  );
+};
+
+export default SelectableButton;
diff --git a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
index b51e092445e..30dcde12dcf 100644
--- a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
+++ b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
@@ -116,6 +116,7 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
               isDisabled={false}
               isIconOnly={true}
               isReversed={false}
+              isSelectable={false}
               onClick={[Function]}
               refCallback={[Function]}
               text="Terra.searchField.submit-search"
@@ -291,6 +292,7 @@ exports[`Snapshots passes in inputRefCallback as the refCallback prop of the Inp
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           refCallback={[Function]}
           text="Terra.searchField.submit-search"
@@ -405,6 +407,7 @@ exports[`Snapshots renders a basic search field 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -460,6 +463,7 @@ exports[`Snapshots renders a disabled search field with a value 1`] = `
         isDisabled={true}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -515,6 +519,7 @@ exports[`Snapshots renders a search field such that custom styles are applied 1`
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -567,6 +572,7 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.searchField.clear"
           type="button"
@@ -588,6 +594,7 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -641,6 +648,7 @@ exports[`Snapshots renders a search field with a defaulted value 1`] = `
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.searchField.clear"
           type="button"
@@ -662,6 +670,7 @@ exports[`Snapshots renders a search field with a defaulted value 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -722,6 +731,7 @@ exports[`Snapshots renders a search field with a label 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -777,6 +787,7 @@ exports[`Snapshots renders a search field with a placeholder 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -830,6 +841,7 @@ exports[`Snapshots renders a search field with a value 1`] = `
           isDisabled={false}
           isIconOnly={true}
           isReversed={false}
+          isSelectable={false}
           onClick={[Function]}
           text="Terra.searchField.clear"
           type="button"
@@ -851,6 +863,7 @@ exports[`Snapshots renders a search field with a value 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -906,6 +919,7 @@ exports[`Snapshots renders a search field with an aria-label 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
@@ -962,6 +976,7 @@ exports[`Snapshots renders a search field with an aria-label using prop 1`] = `
         isDisabled={false}
         isIconOnly={true}
         isReversed={false}
+        isSelectable={false}
         onClick={[Function]}
         refCallback={[Function]}
         text="Terra.searchField.submit-search"
diff --git a/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap b/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
index 62c4cc97c0b..dc33f2f1e71 100644
--- a/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
+++ b/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
@@ -502,6 +502,7 @@ exports[`should render a status view with custom glyph, title, message, and two
           isDisabled={false}
           isIconOnly={false}
           isReversed={false}
+          isSelectable={false}
           key="1"
           text="Action1"
           type="button"
@@ -537,6 +538,7 @@ exports[`should render a status view with custom glyph, title, message, and two
           isDisabled={false}
           isIconOnly={false}
           isReversed={false}
+          isSelectable={false}
           key="2"
           text="Action2"
           type="button"
diff --git a/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap b/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
index 3e2753bfc2e..a637434fee7 100644
--- a/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
+++ b/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
@@ -241,6 +241,7 @@ exports[`ToggleButton should render an open toggle-button when clicked 1`] = `
       isDisabled={false}
       isIconOnly={false}
       isReversed={false}
+      isSelectable={false}
       onClick={[Function]}
       text="Show"
       type="button"
@@ -346,6 +347,7 @@ exports[`ToggleButton should set icon prop correctly 1`] = `
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     onClick={[Function]}
     text="Show"
     type="button"
@@ -381,6 +383,7 @@ exports[`ToggleButton should set icon prop correctly with custom icon 1`] = `
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     onClick={[Function]}
     text="Show"
     type="button"
@@ -417,6 +420,7 @@ exports[`ToggleButton should set onClose prop correctly 1`] = `
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     onClick={[Function]}
     text="Show"
     type="button"
@@ -453,6 +457,7 @@ exports[`ToggleButton should set onOpen prop correctly 1`] = `
     isDisabled={false}
     isIconOnly={false}
     isReversed={false}
+    isSelectable={false}
     onClick={[Function]}
     text="Show"
     type="button"