diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 2b3e7c004e..57a360e6f4 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -11,7 +11,14 @@ import Modal from '../../modules/Modal'
  * @see Modal
  */
 const Confirm = React.forwardRef(function (props, ref) {
-  const { cancelButton, confirmButton, content, header, open, size } = props
+  const {
+    cancelButton = 'Cancel',
+    confirmButton = 'OK',
+    content = 'Are you sure?',
+    header,
+    open,
+    size = 'small',
+  } = props
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
@@ -96,11 +103,4 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-Confirm.defaultProps = {
-  cancelButton: 'Cancel',
-  confirmButton: 'OK',
-  content: 'Are you sure?',
-  size: 'small',
-}
-
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 078389ab26..fb99c755ae 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -16,11 +16,28 @@ import PaginationItem from './PaginationItem'
  */
 const Pagination = React.forwardRef(function (props, ref) {
   const {
-    'aria-label': ariaLabel,
-    boundaryRange,
+    'aria-label': ariaLabel = 'Pagination Navigation',
+    boundaryRange = 1,
     disabled,
-    ellipsisItem,
-    siblingRange,
+    ellipsisItem = '...',
+    firstItem = {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem = {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem = {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem = {},
+    prevItem = {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange = 1,
     totalPages,
   } = props
   const [activePage, setActivePage] = useAutoControlledValue({
@@ -63,10 +80,19 @@ const Pagination = React.forwardRef(function (props, ref) {
   })
   const rest = getUnhandledProps(Pagination, props)
 
+  const paginationItemTypes = {
+    firstItem,
+    lastItem,
+    ellipsisItem,
+    nextItem,
+    pageItem,
+    prevItem,
+  }
+
   return (
     <Menu {...rest} aria-label={ariaLabel} pagination role='navigation' ref={ref}>
       {_.map(items, ({ active, type, value }) =>
-        PaginationItem.create(props[type], {
+        PaginationItem.create(paginationItemTypes[type], {
           defaultProps: {
             content: value,
             disabled,
@@ -129,30 +155,6 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.defaultProps = {
-  'aria-label': 'Pagination Navigation',
-  boundaryRange: 1,
-  ellipsisItem: '...',
-  firstItem: {
-    'aria-label': 'First item',
-    content: '«',
-  },
-  lastItem: {
-    'aria-label': 'Last item',
-    content: '»',
-  },
-  nextItem: {
-    'aria-label': 'Next item',
-    content: '⟩',
-  },
-  pageItem: {},
-  prevItem: {
-    'aria-label': 'Previous item',
-    content: '⟨',
-  },
-  siblingRange: 1,
-}
-
 Pagination.Item = PaginationItem
 
 export default Pagination
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 0159880db2..cfc216d338 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -10,10 +10,9 @@ import Checkbox from '../../modules/Checkbox'
  * @see Form
  */
 const Radio = React.forwardRef(function (props, ref) {
-  const { slider, toggle, type } = props
+  const { slider, toggle, type = 'radio' } = props
 
   const rest = getUnhandledProps(Radio, props)
-  // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
@@ -33,8 +32,4 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-Radio.defaultProps = {
-  type: 'radio',
-}
-
 export default Radio
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index d6b0537f02..4c2c1d7aac 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -2,14 +2,14 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
+import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
 const TextArea = React.forwardRef(function (props, ref) {
-  const { rows, value } = props
+  const { rows = 3, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
   const handleChange = (e) => {
@@ -25,7 +25,7 @@ const TextArea = React.forwardRef(function (props, ref) {
   }
 
   const rest = getUnhandledProps(TextArea, props)
-  const ElementType = getElementType(TextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: 'textarea' })
 
   return (
     <ElementType
@@ -65,9 +65,4 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-TextArea.defaultProps = {
-  as: 'textarea',
-  rows: 3,
-}
-
 export default TextArea
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 37bce0ee52..2adb7c22cf 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -47,7 +47,13 @@ function usePortalState(props) {
  * @see Transition
  */
 function TransitionablePortal(props) {
-  const { children, transition } = props
+  const {
+    children,
+    transition = {
+      animation: 'scale',
+      duration: 400,
+    },
+  } = props
 
   const [portalOpen, setPortalOpen] = usePortalState(props)
   const [transitionVisible, setTransitionVisible] = React.useState(false)
@@ -165,11 +171,4 @@ TransitionablePortal.propTypes = {
   transition: PropTypes.object,
 }
 
-TransitionablePortal.defaultProps = {
-  transition: {
-    animation: 'scale',
-    duration: 400,
-  },
-}
-
 export default TransitionablePortal
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index e638b16101..c50b438bc4 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getUnhandledProps, getElementType, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
@@ -15,7 +15,7 @@ const Breadcrumb = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'breadcrumb', className)
   const rest = getUnhandledProps(Breadcrumb, props)
-  const ElementType = getElementType(Breadcrumb, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index e91b5c0f81..88190f0333 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
@@ -20,7 +20,7 @@ const BreadcrumbDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
-  const ElementType = getElementType(BreadcrumbDivider, props)
+  const ElementType = getComponentType(props)
 
   if (!_.isNil(icon)) {
     return Icon.create(icon, {
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index d8349a2ac8..f3d9b19eb3 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   useKeyOnly,
   useEventCallback,
 } from '../../lib'
@@ -21,8 +21,10 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
-  const ElementType = getElementType(BreadcrumbSection, props, () => {
-    if (link || onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (link || onClick) return 'a'
+    },
   })
 
   const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6c1facc274..8f869d01f8 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -62,7 +62,7 @@ const Form = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Form, props)
-  const ElementType = getElementType(Form, props)
+  const ElementType = getComponentType(props, { defaultAs: 'form' })
 
   return (
     <ElementType {...rest} action={action} className={classes} onSubmit={handleSubmit} ref={ref}>
@@ -117,10 +117,6 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-Form.defaultProps = {
-  as: 'form',
-}
-
 Form.Field = FormField
 Form.Button = FormButton
 Form.Checkbox = FormCheckbox
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index cf4a5f816f..57400fe08b 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormButton = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Button } = props
+
   const rest = getUnhandledProps(FormButton, props)
-  const ElementType = getElementType(FormButton, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormButton.displayName = 'FormButton'
-
 FormButton.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormButton.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormButton.defaultProps = {
-  as: FormField,
-  control: Button,
-}
-
 export default FormButton
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index f98dad56cc..6f0d5fa01d 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormCheckbox = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Checkbox } = props
+
   const rest = getUnhandledProps(FormCheckbox, props)
-  const ElementType = getElementType(FormCheckbox, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormCheckbox.displayName = 'FormCheckbox'
-
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormCheckbox.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormCheckbox.defaultProps = {
-  as: FormField,
-  control: Checkbox,
-}
-
 export default FormCheckbox
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index aeeb745314..62f845a31e 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Form
  */
 const FormDropdown = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Dropdown } = props
+
   const rest = getUnhandledProps(FormDropdown, props)
-  const ElementType = getElementType(FormDropdown, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormDropdown.defaultProps = {
-  as: FormField,
-  control: Dropdown,
-}
-
 export default FormDropdown
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 29d0448df2..ae5c613b0d 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -53,7 +53,7 @@ const FormField = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FormField, props)
-  const ElementType = getElementType(FormField, props)
+  const ElementType = getComponentType(props)
 
   const errorPointing = _.get(error, 'pointing', 'above')
   const errorLabel = Label.create(error, {
@@ -145,7 +145,6 @@ const FormField = React.forwardRef(function (props, ref) {
 })
 
 FormField.displayName = 'FormField'
-
 FormField.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index cbfb2bcc89..b1a2cc3f95 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -29,7 +29,7 @@ const FormGroup = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(FormGroup, props)
-  const ElementType = getElementType(FormGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -39,7 +39,6 @@ const FormGroup = React.forwardRef((props, ref) => {
 })
 
 FormGroup.displayName = 'FormGroup'
-
 FormGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index bd5468a81e..71b3865d14 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Input from '../../elements/Input'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Input
  */
 const FormInput = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Input } = props
+
   const rest = getUnhandledProps(FormInput, props)
-  const ElementType = getElementType(FormInput, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormInput.defaultProps = {
-  as: FormField,
-  control: Input,
-}
-
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 82dd3bfc64..7ce0a38f32 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Radio from '../../addons/Radio'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Radio
  */
 const FormRadio = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Radio } = props
+
   const rest = getUnhandledProps(FormRadio, props)
-  const ElementType = getElementType(FormRadio, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormRadio.defaultProps = {
-  as: FormField,
-  control: Radio,
-}
-
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 30c6d3f185..8658048bfd 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Select from '../../addons/Select'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
@@ -12,9 +12,10 @@ import FormField from './FormField'
  * @see Select
  */
 const FormSelect = React.forwardRef(function (props, ref) {
-  const { control, options } = props
+  const { control = Select, options } = props
+
   const rest = getUnhandledProps(FormSelect, props)
-  const ElementType = getElementType(FormSelect, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} options={options} ref={ref} />
 })
@@ -31,9 +32,4 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-FormSelect.defaultProps = {
-  as: FormField,
-  control: Select,
-}
-
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 2395749970..4fb4a8e1d6 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import TextArea from '../../addons/TextArea'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see TextArea
  */
 const FormTextArea = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = TextArea } = props
+
   const rest = getUnhandledProps(FormTextArea, props)
-  const ElementType = getElementType(FormTextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormTextArea.defaultProps = {
-  as: FormField,
-  control: TextArea,
-}
-
 export default FormTextArea
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 7f856c5bdf..b884dbd1b5 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -60,7 +60,7 @@ const Grid = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Grid, props)
-  const ElementType = getElementType(Grid, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 44d2e9be8a..46e9d7f589 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -54,7 +54,7 @@ const GridColumn = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridColumn, props)
-  const ElementType = getElementType(GridColumn, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index b84de480bc..7dae17ab50 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const GridRow = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridRow, props)
-  const ElementType = getElementType(GridRow, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 5e2db94868..6c984eb871 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -78,7 +78,7 @@ const Menu = React.forwardRef(function (props, ref) {
     'menu',
   )
   const rest = getUnhandledProps(Menu, props)
-  const ElementType = getElementType(Menu, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 9c0652d1dc..7a4d62fc5d 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu item may include a header or may itself be a header.
@@ -11,7 +11,7 @@ const MenuHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MenuHeader, props)
-  const ElementType = getElementType(MenuHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 728a8ec13f..c4f6bafe5c 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -48,8 +48,10 @@ const MenuItem = React.forwardRef(function (props, ref) {
     'item',
     className,
   )
-  const ElementType = getElementType(MenuItem, props, () => {
-    if (onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) return 'a'
+    },
   })
   const rest = getUnhandledProps(MenuItem, props)
 
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index f87a8619cc..6b3489041d 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu can contain a sub menu.
@@ -12,7 +12,7 @@ const MenuMenu = React.forwardRef(function (props, ref) {
 
   const classes = cx(position, 'menu', className)
   const rest = getUnhandledProps(MenuMenu, props)
-  const ElementType = getElementType(MenuMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index 68cfe3e3aa..f6e8e3fb1e 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLParagraph,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -68,7 +68,7 @@ const Message = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Message, props)
-  const ElementType = getElementType(Message, props)
+  const ElementType = getComponentType(props)
 
   const handleDismiss = useEventCallback((e) => {
     _.invoke(props, 'onDismiss', e, props)
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index b6412b3d8b..c0266127e2 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A message can contain a content.
@@ -11,7 +11,7 @@ const MessageContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageContent, props)
-  const ElementType = getElementType(MessageContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index 88536f4846..ee1f8a1578 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const MessageHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
-  const ElementType = getElementType(MessageHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index 73cfe5af42..fc15f147fb 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const MessageItem = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageItem, props)
-  const ElementType = getElementType(MessageItem, props)
+  const ElementType = getComponentType(props, { defaultAs: 'li' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -42,10 +42,6 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-MessageItem.defaultProps = {
-  as: 'li',
-}
-
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
 
 export default MessageItem
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 7262f0ad58..8c48ee5f74 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import MessageItem from './MessageItem'
@@ -20,7 +20,7 @@ const MessageList = React.forwardRef(function (props, ref) {
 
   const classes = cx('list', className)
   const rest = getUnhandledProps(MessageList, props)
-  const ElementType = getElementType(MessageList, props)
+  const ElementType = getComponentType(props, { defaultAs: 'ul' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -44,10 +44,6 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-MessageList.defaultProps = {
-  as: 'ul',
-}
-
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
 
 export default MessageList
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index d9bf410c1a..7ebbbdec43 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -84,7 +84,7 @@ const Table = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Table, props)
-  const ElementType = getElementType(Table, props)
+  const ElementType = getComponentType(props, { defaultAs: 'table' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -116,10 +116,6 @@ const Table = React.forwardRef(function (props, ref) {
 })
 
 Table.displayName = 'Table'
-Table.defaultProps = {
-  as: 'table',
-}
-
 Table.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 605512e7d4..a8a1994872 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -2,13 +2,14 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
+
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
-  const ElementType = getElementType(TableBody, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tbody' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -18,10 +19,6 @@ const TableBody = React.forwardRef(function (props, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-TableBody.defaultProps = {
-  as: 'tbody',
-}
-
 TableBody.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index dcb008c3d8..8471f454b7 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -56,7 +56,7 @@ const TableCell = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(TableCell, props)
-  const ElementType = getElementType(TableCell, props)
+  const ElementType = getComponentType(props, { defaultAs: 'td' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -74,10 +74,6 @@ const TableCell = React.forwardRef(function (props, ref) {
   )
 })
 
-TableCell.defaultProps = {
-  as: 'td',
-}
-
 TableCell.displayName = 'TableCell'
 TableCell.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index c5ff0b8e6b..0d2e584de1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -8,7 +8,7 @@ import TableHeader from './TableHeader'
  * A table can have a footer.
  */
 const TableFooter = React.forwardRef(function (props, ref) {
-  const { as } = props
+  const { as = 'tfoot' } = props
   const rest = getUnhandledProps(TableFooter, props)
 
   return <TableHeader {...rest} as={as} ref={ref} />
@@ -20,8 +20,4 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-TableFooter.defaultProps = {
-  as: 'tfoot',
-}
-
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 4c7f9fe284..bddf5ec557 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -15,9 +15,10 @@ import {
  */
 const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
+
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
-  const ElementType = getElementType(TableHeader, props)
+  const ElementType = getComponentType(props, { defaultAs: 'thead' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -26,10 +27,6 @@ const TableHeader = React.forwardRef(function (props, ref) {
   )
 })
 
-TableHeader.defaultProps = {
-  as: 'thead',
-}
-
 TableHeader.displayName = 'TableHeader'
 TableHeader.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index a4a23b2488..aaf4a96656 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -9,7 +9,8 @@ import TableCell from './TableCell'
  * A table can have a header cell.
  */
 const TableHeaderCell = React.forwardRef(function (props, ref) {
-  const { as, className, sorted } = props
+  const { as = 'th', className, sorted } = props
+
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
 
@@ -28,8 +29,4 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-TableHeaderCell.defaultProps = {
-  as: 'th',
-}
-
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 5e7e83d1d5..7efdc2283f 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -22,7 +22,7 @@ import TableCell from './TableCell'
 const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
-    cellAs,
+    cellAs = 'td',
     cells,
     children,
     className,
@@ -47,7 +47,7 @@ const TableRow = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(TableRow, props)
-  const ElementType = getElementType(TableRow, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tr' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -64,11 +64,6 @@ const TableRow = React.forwardRef(function (props, ref) {
   )
 })
 
-TableRow.defaultProps = {
-  as: 'tr',
-  cellAs: 'td',
-}
-
 TableRow.displayName = 'TableRow'
 TableRow.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index f2fd188de6..e3a704577f 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -96,7 +96,7 @@ const Button = React.forwardRef(function (props, ref) {
     secondary,
     size,
     toggle,
-    type
+    type,
   } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -123,10 +123,13 @@ const Button = React.forwardRef(function (props, ref) {
   const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
 
   const rest = getUnhandledProps(Button, props)
-  const ElementType = getElementType(Button, props, () => {
-    if (!_.isNil(attached) || !_.isNil(label)) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'button',
+    getDefault: () => {
+      if (!_.isNil(attached) || !_.isNil(label)) {
+        return 'div'
+      }
+    },
   })
   const tabIndex = computeTabIndex(ElementType, disabled, props.tabIndex)
 
@@ -315,10 +318,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-Button.defaultProps = {
-  as: 'button',
-}
-
 Button.Content = ButtonContent
 Button.Group = ButtonGroup
 Button.Or = ButtonOr
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index af248b1022..ebe7d58a46 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const ButtonContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonContent, props)
-  const ElementType = getElementType(ButtonContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 79a1db17c5..07ad032136 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -67,7 +67,7 @@ const ButtonGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonGroup, props)
-  const ElementType = getElementType(ButtonGroup, props)
+  const ElementType = getComponentType(props)
 
   if (_.isNil(buttons)) {
     return (
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index 89b05a80fa..f4db380360 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Button groups can contain conditionals.
  */
 const ButtonOr = React.forwardRef(function (props, ref) {
   const { className, text } = props
+
   const classes = cx('or', className)
   const rest = getUnhandledProps(ButtonOr, props)
-  const ElementType = getElementType(ButtonOr, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} data-text={text} ref={ref} />
 })
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index ea9cafe64d..741ca019fd 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -26,7 +26,7 @@ const Container = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Container, props)
-  const ElementType = getElementType(Container, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 2f2147c188..a8c4b2e3ac 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -40,7 +40,7 @@ const Divider = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Divider, props)
-  const ElementType = getElementType(Divider, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index 1ad15a8aaa..4d0c7d481a 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -507,13 +507,13 @@ export const names = [
 ]
 
 /**
- * A flag is is used to represent a political state.
+ * A flag is used to represent a political state.
  */
 const Flag = React.forwardRef(function (props, ref) {
   const { className, name } = props
   const classes = cx(name, 'flag', className)
   const rest = getUnhandledProps(Flag, props)
-  const ElementType = getElementType(Flag, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
@@ -535,8 +535,5 @@ Flag.propTypes = {
 const MemoFlag = React.memo(Flag)
 
 MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
-MemoFlag.defaultProps = {
-  as: 'i',
-}
 
 export default MemoFlag
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index b25a7421df..ad1d099f3b 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -61,7 +61,7 @@ const Header = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Header, props)
-  const ElementType = getElementType(Header, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index b6dc8a1bf4..a8d0aef2d1 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
 const HeaderContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
-  const ElementType = getElementType(HeaderContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 3925146440..9cd4523bfa 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const HeaderSubheader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)
-  const ElementType = getElementType(HeaderSubheader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 1e180fcecd..45fd57915b 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useEventCallback,
@@ -74,7 +74,7 @@ const Icon = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Icon, props)
-  const ElementType = getElementType(Icon, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
   const ariaProps = getAriaProps(props)
 
   const handleClick = useEventCallback((e) => {
@@ -155,8 +155,4 @@ const MemoIcon = React.memo(Icon)
 MemoIcon.Group = IconGroup
 MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
-MemoIcon.defaultProps = {
-  as: 'i',
-}
-
 export default MemoIcon
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 2c17cfbf36..55cb7adbf7 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * Several icons can be used together as a group.
@@ -13,7 +13,7 @@ const IconGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(size, 'icons', className)
   const rest = getUnhandledProps(IconGroup, props)
-  const ElementType = getElementType(IconGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -40,8 +40,4 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-IconGroup.defaultProps = {
-  as: 'i',
-}
-
 export default IconGroup
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index c72c22ff79..7f3df45277 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -47,7 +47,7 @@ const Image = React.forwardRef(function (props, ref) {
     spaced,
     verticalAlign,
     wrapped,
-    ui,
+    ui = true,
   } = props
 
   const classes = cx(
@@ -72,15 +72,18 @@ const Image = React.forwardRef(function (props, ref) {
   const rest = getUnhandledProps(Image, props)
   const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
 
-  const ElementType = getElementType(Image, props, () => {
-    if (
-      !_.isNil(dimmer) ||
-      !_.isNil(label) ||
-      !_.isNil(wrapped) ||
-      !childrenUtils.isNil(children)
-    ) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'img',
+    getDefault: () => {
+      if (
+        !_.isNil(dimmer) ||
+        !_.isNil(label) ||
+        !_.isNil(wrapped) ||
+        !childrenUtils.isNil(children)
+      ) {
+        return 'div'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -183,11 +186,6 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-Image.defaultProps = {
-  as: 'img',
-  ui: true,
-}
-
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
 
 export default Image
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 8ac80b9221..9b02ba722b 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * A group of images.
@@ -12,7 +12,7 @@ const ImageGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, className, 'images')
   const rest = getUnhandledProps(ImageGroup, props)
-  const ElementType = getElementType(ImageGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 7f830a4a65..9cbccb499d 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -8,7 +8,7 @@ import {
   createHTMLInput,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   partitionHTMLProps,
   useKeyOnly,
@@ -46,7 +46,7 @@ const Input = React.forwardRef(function (props, ref) {
     size,
     tabIndex,
     transparent,
-    type,
+    type = 'text',
   } = props
 
   const computeIcon = () => {
@@ -108,7 +108,7 @@ const Input = React.forwardRef(function (props, ref) {
     'input',
     className,
   )
-  const ElementType = getElementType(Input, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionProps()
 
   // Render with children
@@ -234,10 +234,6 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-Input.defaultProps = {
-  type: 'text',
-}
-
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
 
 export default Input
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 30abb13cde..d52c33bf78 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -75,7 +75,7 @@ const Label = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Label, props)
-  const ElementType = getElementType(Label, props)
+  const ElementType = getComponentType(props)
 
   const handleClick = useEventCallback((e) => {
     _.invoke(props, 'onClick', e, props)
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 6da4de001a..64a045607f 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,7 +15,7 @@ const LabelDetail = React.forwardRef(function (props, ref) {
 
   const classes = cx('detail', className)
   const rest = getUnhandledProps(LabelDetail, props)
-  const ElementType = getElementType(LabelDetail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index 01cf51dc5d..d790595d92 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -27,7 +27,7 @@ const LabelGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(LabelGroup, props)
-  const ElementType = getElementType(LabelGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index f805838b3c..29c90ba26c 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -64,7 +64,7 @@ const List = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(List, props)
-  const ElementType = getElementType(List, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 667e6bf0f6..61ed2ba01a 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -28,7 +28,7 @@ const ListContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ListContent, props)
-  const ElementType = getElementType(ListContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index b2672442e3..c4c0557e56 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ListDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
-  const ElementType = getElementType(ListDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index c26850c199..d67ae15b58 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const ListHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
-  const ElementType = getElementType(ListHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index c0fba5fb72..2491728065 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -35,7 +35,7 @@ const ListItem = React.forwardRef(function (props, ref) {
     value,
   } = props
 
-  const ElementType = getElementType(ListItem, props)
+  const ElementType = getComponentType(props)
   const classes = cx(
     useKeyOnly(active, 'active'),
     useKeyOnly(disabled, 'disabled'),
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 403d243b79..9e7e3244b2 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const ListList = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const rest = getUnhandledProps(ListList, props)
-  const ElementType = getElementType(ListList, props)
+  const ElementType = getComponentType(props)
   const classes = cx(useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
 
   return (
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index ed270fa6cd..87e1a08491 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const Loader = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Loader, props)
-  const ElementType = getElementType(Loader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index d7bd272da5..d3df48b785 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Placeholder = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Placeholder, props)
-  const ElementType = getElementType(Placeholder, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 6f8293b3ad..80fc8f6990 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
   const classes = cx(useKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)
-  const ElementType = getElementType(PlaceholderHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 86f3a6e824..7413d4ee55 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * A placeholder can contain an image.
@@ -16,7 +16,7 @@ const PlaceholderImage = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(PlaceholderImage, props)
-  const ElementType = getElementType(PlaceholderImage, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 7ff192252e..7f8c153614 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain have lines of text.
  */
 const PlaceholderLine = React.forwardRef(function (props, ref) {
   const { className, length } = props
+
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)
-  const ElementType = getElementType(PlaceholderLine, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 91a949d7a5..208a6baa68 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain a paragraph.
  */
 const PlaceholderParagraph = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('paragraph', className)
   const rest = getUnhandledProps(PlaceholderParagraph, props)
-  const ElementType = getElementType(PlaceholderParagraph, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 74ffc79607..6904fa8407 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -41,7 +41,7 @@ const Rail = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Rail, props)
-  const ElementType = getElementType(Rail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index f18fcf120f..14fe502083 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Reveal = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Reveal, props)
-  const ElementType = getElementType(Reveal, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 1a2fb4cf30..0caac64f9b 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const RevealContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RevealContent, props)
-  const ElementType = getElementType(RevealContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index cb73a0e7d6..d0a76652dd 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -73,7 +73,7 @@ const Segment = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Segment, props)
-  const ElementType = getElementType(Segment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index a5b00d6c30..8efff38bbc 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -30,7 +30,7 @@ const SegmentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(SegmentGroup, props)
-  const ElementType = getElementType(SegmentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 2ce0aeb0e9..4b524e3280 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder segment can be inline.
@@ -11,7 +11,7 @@ const SegmentInline = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
-  const ElementType = getElementType(SegmentInline, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index bebf135191..85e72bfd38 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -53,10 +53,12 @@ const Step = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Step, props)
-  const ElementType = getElementType(Step, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index d71a931e21..55968739c4 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import StepDescription from './StepDescription'
@@ -19,7 +19,7 @@ const StepContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, title } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)
-  const ElementType = getElementType(StepContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index 6bde53b17e..2d0e6224e2 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -14,7 +14,7 @@ const StepDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)
-  const ElementType = getElementType(StepDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 1b7967809f..3cce7faf0a 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   numberToWordMap,
   SUI,
@@ -51,7 +51,7 @@ const StepGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StepGroup, props)
-  const ElementType = getElementType(StepGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index ad03ec96df..7a27872b8d 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StepTitle = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)
-  const ElementType = getElementType(StepTitle, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/lib/getElementType.js b/src/lib/getComponentType.js
similarity index 59%
rename from src/lib/getElementType.js
rename to src/lib/getComponentType.js
index 27c2bc6769..9c1c5f183a 100644
--- a/src/lib/getElementType.js
+++ b/src/lib/getComponentType.js
@@ -2,18 +2,19 @@
  * Returns a createElement() type based on the props of the Component.
  * Useful for calculating what type a component should render as.
  *
- * @param {function} Component A function or ReactClass.
  * @param {object} props A ReactElement props object
- * @param {function} [getDefault] A function that returns a default element type.
- * @returns {string|function} A ReactElement type
+ * @param {object} [options={}]
+ * @param {string|Function} [options.defaultAs] A default element type.
+ * @param {Function} [options.getDefault] A function that returns a default element type.
+ * @returns {string|Function} A ReactElement type
  */
-function getElementType(Component, props, getDefault) {
-  const { defaultProps = {} } = Component
+function getComponentType(props, options = {}) {
+  const { defaultAs, getDefault } = options
 
   // ----------------------------------------
   // user defined "as" element type
 
-  if (props.as && props.as !== defaultProps.as) return props.as
+  if (props.as && props.as !== defaultAs) return props.as
 
   // ----------------------------------------
   // computed default element type
@@ -31,7 +32,7 @@ function getElementType(Component, props, getDefault) {
   // ----------------------------------------
   // use defaultProp or 'div'
 
-  return defaultProps.as || 'div'
+  return defaultAs || 'div'
 }
 
-export default getElementType
+export default getComponentType
diff --git a/src/lib/index.js b/src/lib/index.js
index 9325384369..a405193eb8 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -17,8 +17,8 @@ export * as customPropTypes from './customPropTypes'
 export eventStack from './eventStack'
 
 export * from './factories'
+export getComponentType from './getComponentType'
 export getUnhandledProps from './getUnhandledProps'
-export getElementType from './getElementType'
 
 export {
   htmlInputAttrs,
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 8b6227d7f5..f2ba942e7f 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
   useEventCallback,
@@ -45,7 +45,7 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
  * An Accordion can contain sub-accordions.
  */
 const AccordionAccordion = React.forwardRef(function (props, ref) {
-  const { className, children, exclusive, panels } = props
+  const { className, children, exclusive = true, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
     defaultState: props.defaultActiveIndex,
@@ -54,7 +54,7 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
 
   const classes = cx('accordion', className)
   const rest = getUnhandledProps(AccordionAccordion, props)
-  const ElementType = getElementType(AccordionAccordion, props)
+  const ElementType = getComponentType(props)
 
   const handleTitleClick = useEventCallback((e, titleProps) => {
     const { index } = titleProps
@@ -92,10 +92,6 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
   )
 })
 
-AccordionAccordion.defaultProps = {
-  exclusive: true,
-}
-
 AccordionAccordion.displayName = 'AccordionAccordion'
 AccordionAccordion.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 9fae433ee0..3fae3cc6f3 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const AccordionContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
-  const ElementType = getElementType(AccordionContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index f9c7ef7fde..1432a15d61 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -22,7 +22,7 @@ const AccordionTitle = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'title', className)
   const rest = getUnhandledProps(AccordionTitle, props)
-  const ElementType = getElementType(AccordionTitle, props)
+  const ElementType = getComponentType(props)
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 00eeeb80a6..b2a80d0360 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   makeDebugger,
@@ -36,7 +36,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     slider,
     tabIndex,
     toggle,
-    type,
+    type = 'checkbox',
     value,
   } = props
 
@@ -193,7 +193,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     className,
   )
   const unhandled = getUnhandledProps(Checkbox, props)
-  const ElementType = getElementType(Checkbox, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionHTMLProps(unhandled, { htmlProps: htmlInputAttrs })
 
   // Heads Up!
@@ -319,8 +319,4 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-Checkbox.defaultProps = {
-  type: 'checkbox',
-}
-
 export default Checkbox
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index 5219cf8d1f..2b3cfbb11b 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const DimmerDimmable = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerDimmable, props)
-  const ElementType = getElementType(DimmerDimmable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 78680f065b..aeb9d09aad 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useVerticalAlignProp,
@@ -68,7 +68,7 @@ const DimmerInner = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerInner, props)
-  const ElementType = getElementType(DimmerInner, props)
+  const ElementType = getComponentType(props)
 
   const childrenContent = childrenUtils.isNil(children) ? content : children
 
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 7c7a8a5bcd..d77720b102 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -11,7 +11,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   objectDiff,
@@ -66,7 +66,44 @@ function renderItemContent(item) {
  * @see Menu
  */
 const Dropdown = React.forwardRef((props, ref) => {
-  return <DropdownInner {...props} innerRef={ref} />
+  const {
+    additionLabel = 'Add ',
+    additionPosition = 'top',
+    closeOnBlur = true,
+    closeOnEscape = true,
+    deburr = false,
+    icon = 'dropdown',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    openOnFocus = true,
+    renderLabel = renderItemContent,
+    searchInput = 'text',
+    selectOnBlur = true,
+    selectOnNavigation = true,
+    wrapSelection = true,
+    ...rest
+  } = props
+
+  return (
+    <DropdownInner
+      additionLabel={additionLabel}
+      additionPosition={additionPosition}
+      closeOnBlur={closeOnBlur}
+      closeOnEscape={closeOnEscape}
+      deburr={deburr}
+      icon={icon}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      openOnFocus={openOnFocus}
+      renderLabel={renderLabel}
+      searchInput={searchInput}
+      selectOnBlur={selectOnBlur}
+      selectOnNavigation={selectOnNavigation}
+      wrapSelection={wrapSelection}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class DropdownInner extends Component {
@@ -1088,7 +1125,7 @@ class DropdownInner extends Component {
       className,
     )
     const rest = getUnhandledProps(Dropdown, this.props)
-    const ElementType = getElementType(Dropdown, this.props)
+    const ElementType = getComponentType(this.props)
     const ariaOptions = this.getDropdownAriaOptions(ElementType, this.props)
 
     return (
@@ -1442,27 +1479,10 @@ Dropdown.propTypes = {
 }
 
 Dropdown.displayName = 'Dropdown'
-Dropdown.defaultProps = {
-  additionLabel: 'Add ',
-  additionPosition: 'top',
-  closeOnBlur: true,
-  closeOnEscape: true,
-  deburr: false,
-  icon: 'dropdown',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  openOnFocus: true,
-  renderLabel: renderItemContent,
-  searchInput: 'text',
-  selectOnBlur: true,
-  selectOnNavigation: true,
-  wrapSelection: true,
-}
 
 DropdownInner.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
 
 if (process.env.NODE_ENV !== 'production') {
-  DropdownInner.defaultProps = Dropdown.defaultProps
   DropdownInner.propTypes = Dropdown.propTypes
 }
 
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index e4f283bbe5..4ffa5a3d82 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A dropdown menu can contain dividers to separate related content.
@@ -12,7 +12,7 @@ const DropdownDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownDivider, props)
-  const ElementType = getElementType(DropdownDivider, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index 9cb15436a0..c91bf12c2e 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const DropdownHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(DropdownHeader, props)
-  const ElementType = getElementType(DropdownHeader, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5f4fb65419..5722d0b767 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -8,7 +8,7 @@ import {
   createShorthand,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -52,7 +52,7 @@ const DropdownItem = React.forwardRef(function (props, ref) {
     ? childrenUtils.someByType(children, 'DropdownMenu') && 'dropdown'
     : icon
   const rest = getUnhandledProps(DropdownItem, props)
-  const ElementType = getElementType(DropdownItem, props)
+  const ElementType = getComponentType(props)
   const ariaOptions = {
     role: 'option',
     'aria-disabled': disabled,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index cdc53ef6b1..e77535e2c8 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const DropdownMenu = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DropdownMenu, props)
-  const ElementType = getElementType(DropdownMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 8f46f28f1c..78bb7c93c7 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -3,13 +3,13 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthandFactory, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthandFactory, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A search item sub-component for Dropdown component.
  */
 const DropdownSearchInput = React.forwardRef(function (props, ref) {
-  const { autoComplete, className, tabIndex, type, value } = props
+  const { autoComplete = 'off', className, tabIndex, type = 'text', value } = props
 
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
@@ -18,7 +18,7 @@ const DropdownSearchInput = React.forwardRef(function (props, ref) {
   }
 
   const classes = cx('search', className)
-  const ElementType = getElementType(DropdownSearchInput, props)
+  const ElementType = getComponentType(props, { defaultAs: 'input' })
   const rest = getUnhandledProps(DropdownSearchInput, props)
 
   return (
@@ -57,12 +57,6 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-DropdownSearchInput.defaultProps = {
-  as: 'input',
-  autoComplete: 'off',
-  type: 'text',
-}
-
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
 
 export default DropdownSearchInput
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index fd7a106947..17e29bc4de 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const DropdownText = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownText, props)
-  const ElementType = getElementType(DropdownText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 06dddd6bff..ebcaaa7c10 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLIframe,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useAutoControlledValue,
@@ -109,7 +109,7 @@ const Embed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
   const rest = getUnhandledProps(Embed, props)
-  const ElementType = getElementType(Embed, props)
+  const ElementType = getComponentType(props)
 
   const iconShorthand = icon !== undefined ? icon : 'video play'
 
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index cf35c358bb..dbd1b4679e 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isBrowser,
   makeDebugger,
@@ -37,15 +37,15 @@ const Modal = React.forwardRef(function (props, ref) {
   const {
     actions,
     basic,
-    centered,
+    centered = true,
     children,
     className,
     closeIcon,
-    closeOnDimmerClick,
-    closeOnDocumentClick,
+    closeOnDimmerClick = true,
+    closeOnDocumentClick = false,
     content,
-    dimmer,
-    eventPool,
+    dimmer = true,
+    eventPool = 'Modal',
     header,
     size,
     style,
@@ -185,7 +185,7 @@ const Modal = React.forwardRef(function (props, ref) {
       'modal transition visible active',
       className,
     )
-    const ElementType = getElementType(Modal, props)
+    const ElementType = getComponentType(props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
     const closeIconJSX = Icon.create(closeIconName, {
@@ -398,14 +398,6 @@ Modal.propTypes = {
    */
 }
 
-Modal.defaultProps = {
-  centered: true,
-  dimmer: true,
-  closeOnDimmerClick: true,
-  closeOnDocumentClick: false,
-  eventPool: 'Modal',
-}
-
 Modal.Actions = ModalActions
 Modal.Content = ModalContent
 Modal.Description = ModalDescription
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index 37bf007bea..b401e6aa73 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Button from '../../elements/Button'
@@ -20,7 +20,7 @@ const ModalActions = React.forwardRef(function (props, ref) {
 
   const classes = cx('actions', className)
   const rest = getUnhandledProps(ModalActions, props)
-  const ElementType = getElementType(ModalActions, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 5c41101b59..4f04805dae 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const ModalContent = React.forwardRef(function (props, ref) {
     'content',
   )
   const rest = getUnhandledProps(ModalContent, props)
-  const ElementType = getElementType(ModalContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index 99c1a11502..691f1d56e8 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A modal can contain a description with one or more paragraphs.
@@ -11,7 +11,7 @@ const ModalDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ModalDescription, props)
-  const ElementType = getElementType(ModalDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index 7599a54583..bad1132c16 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useClassNamesOnNode,
   useKeyOnly,
@@ -34,7 +34,7 @@ const ModalDimmer = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(ModalDimmer, props)
-  const ElementType = getElementType(ModalDimmer, props)
+  const ElementType = getComponentType(props)
 
   useClassNamesOnNode(mountNode, bodyClasses)
 
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 14fa4404aa..6e0822f247 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const ModalHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ModalHeader, props)
-  const ElementType = getElementType(ModalHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index f6d1111ed1..1237cb0d07 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -10,7 +10,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -35,7 +35,9 @@ const debug = makeDebugger('popup')
  */
 function getPortalProps(props) {
   const portalProps = {}
-  const normalizedOn = _.isArray(props.on) ? props.on : [props.on]
+
+  const on = props.on ?? ['click', 'hover']
+  const normalizedOn = _.isArray(on) ? on : [on]
 
   if (props.hoverable) {
     portalProps.closeOnPortalMouseLeave = true
@@ -118,17 +120,17 @@ const Popup = React.forwardRef(function (props, ref) {
     content,
     context,
     children,
-    disabled,
-    eventsEnabled,
+    disabled = false,
+    eventsEnabled = true,
     flowing,
     header,
     inverted,
     offset,
-    pinned,
+    pinned = false,
     popper,
     popperDependencies,
-    popperModifiers,
-    position,
+    popperModifiers = [],
+    position = 'top left',
     positionFixed,
     size,
     style,
@@ -230,7 +232,7 @@ const Popup = React.forwardRef(function (props, ref) {
       'popup transition visible',
       className,
     )
-    const ElementType = getElementType(Popup, props)
+    const ElementType = getComponentType(props)
 
     const styles = {
       // Heads up! We need default styles to get working correctly `flowing`
@@ -469,15 +471,6 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-Popup.defaultProps = {
-  disabled: false,
-  eventsEnabled: true,
-  on: ['click', 'hover'],
-  pinned: false,
-  popperModifiers: [],
-  position: 'top left',
-}
-
 Popup.Content = PopupContent
 Popup.Header = PopupHeader
 
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index fa30a42244..167cef2c44 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const PopupContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(PopupContent, props)
-  const ElementType = getElementType(PopupContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 94e6384ee9..8eff4c7fda 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const PopupHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(PopupHeader, props)
-  const ElementType = getElementType(PopupHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 6e26f4afd1..7c20634714 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -141,7 +141,7 @@ const Progress = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Progress, props)
-  const ElementType = getElementType(Progress, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index f4bf35a6d9..c41a299797 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -16,7 +16,7 @@ import RatingIcon from './RatingIcon'
  * A rating indicates user interest in content.
  */
 const Rating = React.forwardRef(function (props, ref) {
-  const { className, clearable, disabled, icon, maxRating, size } = props
+  const { className, clearable = 'auto', disabled, icon, maxRating = 1, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
     state: props.rating,
@@ -36,7 +36,7 @@ const Rating = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Rating, props)
-  const ElementType = getElementType(Rating, props)
+  const ElementType = getComponentType(props)
 
   const handleIconClick = (e, { index }) => {
     if (disabled) {
@@ -151,11 +151,6 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-Rating.defaultProps = {
-  clearable: 'auto',
-  maxRating: 1,
-}
-
 Rating.Icon = RatingIcon
 
 export default Rating
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 22cc558e09..1d87534b71 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
@@ -19,7 +19,7 @@ const RatingIcon = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RatingIcon, props)
-  const ElementType = getElementType(RatingIcon, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -97,8 +97,4 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-RatingIcon.defaultProps = {
-  as: 'i',
-}
-
 export default RatingIcon
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 8cfd84fda9..145cc8f22a 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -9,7 +9,7 @@ import {
   ModernAutoControlledComponent as Component,
   customPropTypes,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   isBrowser,
@@ -45,7 +45,26 @@ const overrideSearchInputProps = (predefinedProps) => {
  * A search module allows a user to query for results from a selection of data
  */
 const Search = React.forwardRef((props, ref) => {
-  return <SearchInner {...props} innerRef={ref} />
+  const {
+    icon = 'search',
+    input = 'text',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    showNoResults = true,
+    ...rest
+  } = props
+
+  return (
+    <SearchInner
+      icon={icon}
+      input={input}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      showNoResults={showNoResults}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class SearchInner extends Component {
@@ -499,7 +518,7 @@ class SearchInner extends Component {
       className,
     )
     const unhandled = getUnhandledProps(Search, this.props)
-    const ElementType = getElementType(Search, this.props)
+    const ElementType = getComponentType(this.props)
     const [htmlInputProps, rest] = partitionHTMLProps(unhandled, {
       htmlProps: htmlInputAttrs,
     })
@@ -679,18 +698,9 @@ Search.propTypes = {
   placeholder: PropTypes.string,
 }
 
-Search.defaultProps = {
-  icon: 'search',
-  input: 'text',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  showNoResults: true,
-}
-
 SearchInner.autoControlledProps = ['open', 'value']
 
 if (process.env.NODE_ENV !== 'production') {
-  SearchInner.defaultProps = Search.defaultProps
   SearchInner.propTypes = Search.propTypes
 }
 
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 71d9c01224..218da2083f 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -5,18 +5,25 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
 const SearchCategory = React.forwardRef(function (props, ref) {
-  const { active, children, className, content, layoutRenderer, renderer } = props
+  const {
+    active,
+    children,
+    className,
+    content,
+    layoutRenderer = SearchCategoryLayout,
+    renderer = ({ name }) => name,
+  } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
-  const ElementType = getElementType(SearchCategory, props)
+  const ElementType = getComponentType(props)
 
   const categoryContent = renderer(props)
   const resultsContent = childrenUtils.isNil(children) ? content : children
@@ -28,11 +35,6 @@ const SearchCategory = React.forwardRef(function (props, ref) {
   )
 })
 
-SearchCategory.defaultProps = {
-  layoutRenderer: SearchCategoryLayout,
-  renderer: ({ name }) => name,
-}
-
 SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 69f3ac5239..7bba25b50a 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -32,7 +32,7 @@ const defaultRenderer = ({ image, price, title, description }) => [
 ]
 
 const SearchResult = React.forwardRef(function (props, ref) {
-  const { active, className, renderer } = props
+  const { active, className, renderer = defaultRenderer } = props
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -40,7 +40,7 @@ const SearchResult = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'result', className)
   const rest = getUnhandledProps(SearchResult, props)
-  const ElementType = getElementType(SearchResult, props)
+  const ElementType = getComponentType(props)
 
   // Note: You technically only need the 'content' wrapper when there's an
   // image. However, optionally wrapping it makes this function a lot more
@@ -99,8 +99,4 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-SearchResult.defaultProps = {
-  renderer: defaultRenderer,
-}
-
 export default SearchResult
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index dc39226950..5c44b66e31 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -2,13 +2,13 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 const SearchResults = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('results transition', className)
   const rest = getUnhandledProps(SearchResults, props)
-  const ElementType = getElementType(SearchResults, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 764c16178e..0e6c470bdc 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   isRefObject,
   useKeyOnly,
   useIsomorphicLayoutEffect,
@@ -50,7 +50,16 @@ function useAnimationTick(visible) {
  * A sidebar hides additional content beside a page.
  */
 const Sidebar = React.forwardRef((props, ref) => {
-  const { animation, className, children, content, direction, target, visible, width } = props
+  const {
+    animation,
+    className,
+    children,
+    content,
+    direction = 'left',
+    target = documentRef,
+    visible = false,
+    width,
+  } = props
 
   const [animationTick, resetAnimationTick] = useAnimationTick(visible)
   const elementRef = useMergedRefs(ref, React.useRef())
@@ -107,7 +116,7 @@ const Sidebar = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(Sidebar, props)
-  const ElementType = getElementType(Sidebar, props)
+  const ElementType = getComponentType(props)
   const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
   return (
@@ -190,12 +199,6 @@ Sidebar.propTypes = {
   width: PropTypes.oneOf(['very thin', 'thin', 'wide', 'very wide']),
 }
 
-Sidebar.defaultProps = {
-  direction: 'left',
-  target: documentRef,
-  visible: false,
-}
-
 Sidebar.animationDuration = 500
 
 Sidebar.Pushable = SidebarPushable
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index ab7ce6b604..b8f5dd8b0c 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A pushable sub-component for Sidebar.
@@ -11,7 +11,7 @@ const SidebarPushable = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('pushable', className)
   const rest = getUnhandledProps(SidebarPushable, props)
-  const ElementType = getElementType(SidebarPushable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index 670e92eb92..ffc791dee5 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -18,7 +18,7 @@ const SidebarPusher = React.forwardRef(function (props, ref) {
 
   const classes = cx('pusher', useKeyOnly(dimmed, 'dimmed'), className)
   const rest = getUnhandledProps(SidebarPusher, props)
-  const ElementType = getElementType(SidebarPusher, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index ab8c821c9a..3a30afa4c4 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isRefObject,
   isBrowser,
@@ -18,13 +18,13 @@ import {
  */
 const Sticky = React.forwardRef(function (props, ref) {
   const {
-    active,
-    bottomOffset,
+    active = true,
+    bottomOffset = 0,
     children,
     className,
     context,
-    offset,
-    scrollContext,
+    offset = 0,
+    scrollContext = isBrowser() ? window : null,
     styleElement,
   } = props
 
@@ -242,7 +242,7 @@ const Sticky = React.forwardRef(function (props, ref) {
   // ----------------------------------------
 
   const rest = getUnhandledProps(Sticky, props)
-  const ElementType = getElementType(Sticky, props)
+  const ElementType = getComponentType(props)
 
   const containerClasses = cx(
     sticky && 'ui',
@@ -333,11 +333,4 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-Sticky.defaultProps = {
-  active: true,
-  bottomOffset: 0,
-  offset: 0,
-  scrollContext: isBrowser() ? window : null,
-}
-
 export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 3004f4ceda..03ef505cea 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
 } from '../../lib'
@@ -19,7 +19,13 @@ import TabPane from './TabPane'
  * @see Segment
  */
 const Tab = React.forwardRef(function (props, ref) {
-  const { grid, menu, panes, menuPosition, renderActiveOnly } = props
+  const {
+    grid = { paneWidth: 12, tabWidth: 4 },
+    menu = { attached: true, tabular: true },
+    menuPosition,
+    panes,
+    renderActiveOnly = true,
+  } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -86,7 +92,7 @@ const Tab = React.forwardRef(function (props, ref) {
 
   const menuElement = renderMenu()
   const rest = getUnhandledProps(Tab, props)
-  const ElementType = getElementType(Tab, props)
+  const ElementType = getComponentType(props)
 
   if (menuElement.props.vertical) {
     return (
@@ -155,14 +161,6 @@ Tab.propTypes = {
   renderActiveOnly: PropTypes.bool,
 }
 
-Tab.autoControlledProps = ['activeIndex']
-
-Tab.defaultProps = {
-  grid: { paneWidth: 12, tabWidth: 4 },
-  menu: { attached: true, tabular: true },
-  renderActiveOnly: true,
-}
-
 Tab.Pane = TabPane
 
 export default Tab
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 4551dfb497..0e1bdbad45 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -16,11 +16,11 @@ import Segment from '../../elements/Segment/Segment'
  * A tab pane holds the content of a tab.
  */
 const TabPane = React.forwardRef(function (props, ref) {
-  const { active, children, className, content, loading } = props
+  const { active = true, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
   const rest = getUnhandledProps(TabPane, props)
-  const ElementType = getElementType(TabPane, props)
+  const ElementType = getComponentType(props, { defaultAs: Segment })
 
   const calculatedDefaultProps = {}
 
@@ -35,11 +35,6 @@ const TabPane = React.forwardRef(function (props, ref) {
   )
 })
 
-TabPane.defaultProps = {
-  as: Segment,
-  active: true,
-}
-
 TabPane.displayName = 'TabPane'
 TabPane.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0a8142939e..4708820aba 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -19,7 +19,7 @@ const debug = makeDebugger('transition_group')
  * Wraps all children elements with proper callbacks and props.
  *
  * @param {React.ReactNode} children
- * @param {Stream} animation
+ * @param {String} animation
  * @param {Number|String|Object} duration
  * @param {Boolean} directional
  *
@@ -113,12 +113,12 @@ const TransitionGroup = React.forwardRef(function (props, ref) {
 
   const children = useWrappedChildren(
     props.children,
-    props.animation,
-    props.duration,
+    props.animation ?? 'fade',
+    props.duration ?? 500,
     props.directional,
   )
 
-  const ElementType = getElementType(TransitionGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: React.Fragment })
   const rest = getUnhandledProps(TransitionGroup, props)
 
   return (
@@ -153,10 +153,4 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-TransitionGroup.defaultProps = {
-  as: React.Fragment,
-  animation: 'fade',
-  duration: 500,
-}
-
 export default TransitionGroup
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 733e20c3b2..30c35845d5 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const Advertisement = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Advertisement, props)
-  const ElementType = getElementType(Advertisement, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} data-text={test} ref={ref}>
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index 13cefed144..f2763c3285 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -52,10 +52,12 @@ const Card = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Card, props)
-  const ElementType = getElementType(Card, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index 475ca2e719..ecb0a3afe6 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -25,7 +25,7 @@ const CardContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
   const rest = getUnhandledProps(CardContent, props)
-  const ElementType = getElementType(CardContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 49352e62f7..0de11e2a4b 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
-  const ElementType = getElementType(CardDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 276aa27056..7263a66e8c 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const CardGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CardGroup, props)
-  const ElementType = getElementType(CardGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index 9dd0e16d31..bf41e51cfe 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
-  const ElementType = getElementType(CardHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index ac1377d220..d45b075fac 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
-  const ElementType = getElementType(CardMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index bf136fbed0..59db4e52df 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -26,7 +26,7 @@ const Comment = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
-  const ElementType = getElementType(Comment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 3dde605c83..82eae2cc95 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -18,7 +18,7 @@ const CommentAction = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
-  const ElementType = getElementType(CommentAction, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -27,10 +27,6 @@ const CommentAction = React.forwardRef(function (props, ref) {
   )
 })
 
-CommentAction.defaultProps = {
-  as: 'a',
-}
-
 CommentAction.displayName = 'CommentAction'
 CommentAction.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index 8286ae7005..c1cca85fc9 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an list of actions a user may perform related to this comment.
@@ -11,7 +11,7 @@ const CommentActions = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('actions', className)
   const rest = getUnhandledProps(CommentActions, props)
-  const ElementType = getElementType(CommentActions, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index be3e412ac7..01b3747c19 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an author.
@@ -11,7 +11,7 @@ const CommentAuthor = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('author', className)
   const rest = getUnhandledProps(CommentAuthor, props)
-  const ElementType = getElementType(CommentAuthor, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index c709321080..dc5aee78d1 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   createHTMLImage,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -19,7 +19,7 @@ const CommentAvatar = React.forwardRef(function (props, ref) {
   const classes = cx('avatar', className)
   const rest = getUnhandledProps(CommentAvatar, props)
   const [imageProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
-  const ElementType = getElementType(CommentAvatar, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rootProps} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index 9badf0c8ec..df72aeb471 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain content.
@@ -11,7 +11,7 @@ const CommentContent = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
-  const ElementType = getElementType(CommentContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 5b18238dea..2eea6998e6 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -28,7 +28,7 @@ const CommentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CommentGroup, props)
-  const ElementType = getElementType(CommentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index f06970322e..92fee6d069 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
@@ -11,7 +11,7 @@ const CommentMetadata = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('metadata', className)
   const rest = getUnhandledProps(CommentMetadata, props)
-  const ElementType = getElementType(CommentMetadata, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 45392353bf..17f2bbd895 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain text.
@@ -11,7 +11,7 @@ const CommentText = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
-  const ElementType = getElementType(CommentText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index 725db44d14..c3a35703b1 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedDate from './FeedDate'
 import FeedEvent from './FeedEvent'
@@ -22,7 +22,7 @@ const Feed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'feed', className)
   const rest = getUnhandledProps(Feed, props)
-  const ElementType = getElementType(Feed, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 1ee33e2eb8..8874ae80a8 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -19,7 +19,7 @@ const FeedContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(FeedContent, props)
-  const ElementType = getElementType(FeedContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index 628f73aabb..e4a836d355 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * An event or an event summary can contain a date.
@@ -11,7 +11,7 @@ const FeedDate = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('date', className)
   const rest = getUnhandledProps(FeedDate, props)
-  const ElementType = getElementType(FeedDate, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 31867b3b73..e4f971bddc 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthand, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthand, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
@@ -25,7 +25,7 @@ const FeedEvent = React.forwardRef(function (props, ref) {
 
   const classes = cx('event', className)
   const rest = getUnhandledProps(FeedEvent, props)
-  const ElementType = getElementType(FeedEvent, props)
+  const ElementType = getComponentType(props)
 
   const hasContentProp = content || date || extraImages || extraText || meta || summary
   const contentProps = { content, date, extraImages, extraText, meta, summary }
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index cb5d446fe6..50f51a8ce8 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const FeedExtra = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FeedExtra, props)
-  const ElementType = getElementType(FeedExtra, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 93f28bd6cd..56fd9acd6b 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const FeedLabel = React.forwardRef(function (props, ref) {
 
   const classes = cx('label', className)
   const rest = getUnhandledProps(FeedLabel, props)
-  const ElementType = getElementType(FeedLabel, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 70eca84786..b5e4c8bf2d 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
@@ -13,7 +13,7 @@ const FeedLike = React.forwardRef(function (props, ref) {
 
   const classes = cx('like', className)
   const rest = getUnhandledProps(FeedLike, props)
-  const ElementType = getElementType(FeedLike, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -31,10 +31,6 @@ const FeedLike = React.forwardRef(function (props, ref) {
   )
 })
 
-FeedLike.defaultProps = {
-  as: 'a',
-}
-
 FeedLike.displayName = 'FeedLike'
 FeedLike.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 816dbc9dba..b0c5d0f222 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedLike from './FeedLike'
@@ -19,7 +19,7 @@ const FeedMeta = React.forwardRef(function (props, ref) {
 
   const classes = cx('meta', className)
   const rest = getUnhandledProps(FeedMeta, props)
-  const ElementType = getElementType(FeedMeta, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 2e2055c7f8..2be1f0c4b3 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -20,7 +20,7 @@ const FeedSummary = React.forwardRef(function (props, ref) {
 
   const classes = cx('summary', className)
   const rest = getUnhandledProps(FeedSummary, props)
-  const ElementType = getElementType(FeedSummary, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 9b7d44e55c..10866e8720 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A feed can contain a user element.
  */
 const FeedUser = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
-  const ElementType = getElementType(FeedUser, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -35,8 +36,4 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-FeedUser.defaultProps = {
-  as: 'a',
-}
-
 export default FeedUser
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index e76e5e4862..41f37257a6 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import ItemContent from './ItemContent'
 import ItemDescription from './ItemDescription'
 import ItemExtra from './ItemExtra'
@@ -19,7 +19,7 @@ const Item = React.forwardRef(function (props, ref) {
 
   const classes = cx('item', className)
   const rest = getUnhandledProps(Item, props)
-  const ElementType = getElementType(Item, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 6699a1cbc1..add8a28dd4 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useVerticalAlignProp,
@@ -23,7 +23,7 @@ const ItemContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
   const rest = getUnhandledProps(ItemContent, props)
-  const ElementType = getElementType(ItemContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index be5440a41d..8e5082c97b 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
-  const ElementType = getElementType(ItemDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index ed9a2a0add..3402f02f3a 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemExtra = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
-  const ElementType = getElementType(ItemExtra, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 7ceca3b9ea..33269ecce3 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useKeyOrValueAndKey,
@@ -29,7 +29,7 @@ const ItemGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ItemGroup, props)
-  const ElementType = getElementType(ItemGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 610e6d649a..4a841b8a50 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
-  const ElementType = getElementType(ItemHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 307bf59a72..73d347d9d8 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemMeta = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
-  const ElementType = getElementType(ItemMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index e11df59393..05b910d017 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const Statistic = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Statistic, props)
-  const ElementType = getElementType(Statistic, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index eac360d23b..c85df42892 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -31,7 +31,7 @@ const StatisticGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StatisticGroup, props)
-  const ElementType = getElementType(StatisticGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index efc01ab9bc..b1134cd185 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StatisticLabel = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
-  const ElementType = getElementType(StatisticLabel, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 78ac615220..2ce9eda25a 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const StatisticValue = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(text, 'text'), 'value', className)
   const rest = getUnhandledProps(StatisticValue, props)
-  const ElementType = getElementType(StatisticValue, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index 46a96b471e..499aa41366 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/test/specs/addons/Confirm/Confirm-test.js
@@ -37,6 +37,7 @@ describe('Confirm', () => {
     requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
+    defaultValue: 'OK',
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
@@ -67,7 +68,12 @@ describe('Confirm', () => {
 
   describe('cancelButton', () => {
     it('is "Cancel" by default', () => {
-      Confirm.defaultProps.cancelButton.should.equal('Cancel')
+      shallow(<Confirm />)
+        .find('Button')
+        .first()
+        .shallow()
+        .childAt(0)
+        .should.have.text('Cancel')
     })
     it('sets the cancel button text', () => {
       shallow(<Confirm cancelButton='foo' />)
@@ -81,7 +87,11 @@ describe('Confirm', () => {
 
   describe('confirmButton', () => {
     it('is "OK" by default', () => {
-      Confirm.defaultProps.confirmButton.should.equal('OK')
+      shallow(<Confirm />)
+        .find('Button[primary]')
+        .shallow()
+        .childAt(0)
+        .should.have.text('OK')
     })
     it('sets the confirm button text', () => {
       shallow(<Confirm confirmButton='foo' />)
diff --git a/test/specs/commonTests/classNameHelpers.js b/test/specs/commonTests/classNameHelpers.js
index 65671731a1..6fc47dc6de 100644
--- a/test/specs/commonTests/classNameHelpers.js
+++ b/test/specs/commonTests/classNameHelpers.js
@@ -37,13 +37,12 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
 }
 
 export const noDefaultClassNameFromProp = (Component, propKey, propValues, options = {}) => {
-  const { defaultProps = {} } = Component
-  const { className = propKey, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {}, defaultValue } = options
 
   // required props may include a prop that creates a className
   // if so, we cannot assert that it doesn't exist by default because it is required to exist
   // skip assertions for required props
-  if (propKey in defaultProps) return
+  if (defaultValue) return
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
diff --git a/test/specs/commonTests/implementsClassNameProps.js b/test/specs/commonTests/implementsClassNameProps.js
index 154ccd93c7..8b73ea2b8b 100644
--- a/test/specs/commonTests/implementsClassNameProps.js
+++ b/test/specs/commonTests/implementsClassNameProps.js
@@ -37,6 +37,7 @@ export const propKeyAndValueToClassName = (Component, propKey, propValues, optio
  * @param {String} propKey A props key.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -80,6 +81,7 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
  * @param {String} propKey A props key.
  * @param {array} propValues Array of possible values of prop.
  * @param {Object} [options={}]
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -125,6 +127,7 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
  * @param {array} propValues Array of possible props values.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  */
diff --git a/test/specs/commonTests/implementsCommonProps.js b/test/specs/commonTests/implementsCommonProps.js
index dc7a4b2dea..ec0eb026d6 100644
--- a/test/specs/commonTests/implementsCommonProps.js
+++ b/test/specs/commonTests/implementsCommonProps.js
@@ -105,6 +105,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
diff --git a/test/specs/commonTests/implementsShorthandProp.js b/test/specs/commonTests/implementsShorthandProp.js
index 64c8f7fc57..e89dcdb565 100644
--- a/test/specs/commonTests/implementsShorthandProp.js
+++ b/test/specs/commonTests/implementsShorthandProp.js
@@ -30,12 +30,14 @@ const shorthandComponentName = (ShorthandComponent) => {
  * @param {Boolean} [options.parentIsFragment=false] A flag that shows the type of the Component to test.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
 export default (Component, options = {}) => {
   const {
     alwaysPresent,
+    defaultValue,
     assertExactMatch = true,
     autoGenerateKey = true,
     mapValueToProps,
@@ -90,10 +92,9 @@ export default (Component, options = {}) => {
       }
     }
 
-    if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
+    if (alwaysPresent) {
       it(`has default ${name} when not defined`, () => {
         wrapper = mount(React.createElement(Component, requiredProps))
-
         wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
@@ -101,14 +102,16 @@ export default (Component, options = {}) => {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
-      it(`has no ${name} when not defined`, () => {
-        wrapper = mount(React.createElement(Component, requiredProps))
+      if (!defaultValue) {
+        it(`has no ${name} when not defined`, () => {
+          wrapper = mount(React.createElement(Component, requiredProps))
 
-        wrapper.should.not.have.descendants(ShorthandComponent)
-      })
+          wrapper.should.not.have.descendants(ShorthandComponent)
+        })
+      }
     }
 
-    if (!alwaysPresent) {
+    if (!alwaysPresent && !defaultValue) {
       it(`has no ${name} when null`, () => {
         const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
         wrapper = mount(element)
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index 616e7de4e6..d183696e2e 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -211,7 +211,6 @@ export default function isConformant(Component, options = {}) {
     it('Component.handledProps includes all handled props', () => {
       const computedProps = _.union(
         componentProps.autoControlledProps,
-        _.keys(componentProps.defaultProps),
         _.keys(componentProps.propTypes),
       )
       const expectedProps = _.uniq(computedProps).sort()
@@ -219,7 +218,7 @@ export default function isConformant(Component, options = {}) {
       componentProps.handledProps.should.to.deep.equal(
         expectedProps,
         'It seems that not all props were defined in Component.handledProps, you need to check that they are equal ' +
-          'to the union of Component.autoControlledProps and keys of Component.defaultProps and Component.propTypes',
+          'to the union of Component.autoControlledProps and keys of Component.propTypes',
       )
     })
   })
@@ -314,6 +313,15 @@ export default function isConformant(Component, options = {}) {
     })
   })
 
+  // ----------------------------------------
+  // Has no deprecated .defaultProps
+  // ----------------------------------------
+  describe('defaultProps', () => {
+    it('does not exist', () => {
+      expect(Component.defaultProps).to.be.undefined()
+    })
+  })
+
   // ----------------------------------------
   // Handles className
   // ----------------------------------------
diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
index 79cd097f5d..013515efd6 100644
--- a/test/specs/elements/Image/Image-test.js
+++ b/test/specs/elements/Image/Image-test.js
@@ -88,8 +88,7 @@ describe('Image', () => {
 
   describe('ui', () => {
     it('is true by default', () => {
-      Image.defaultProps.should.have.any.keys('ui')
-      Image.defaultProps.ui.should.equal(true)
+      shallow(<Image />).should.have.className('ui')
     })
     it('adds the "ui" className when true', () => {
       shallow(<Image ui />).should.have.className('ui')
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 8f43d884aa..4b3d9e8d06 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -112,6 +112,7 @@ describe('Dropdown', () => {
   ])
 
   common.implementsIconProp(Dropdown, {
+    defaultValue: 'search',
     assertExactMatch: false,
     autoGenerateKey: false,
   })
@@ -682,7 +683,6 @@ describe('Dropdown', () => {
 
   describe('icon', () => {
     it('defaults to a dropdown icon', () => {
-      Dropdown.defaultProps.icon.should.equal('dropdown')
       wrapperMount(<Dropdown />).should.contain.descendants('.dropdown.icon')
     })
 
diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js
index fb42392a6d..71d10213c0 100644
--- a/test/specs/modules/Modal/Modal-test.js
+++ b/test/specs/modules/Modal/Modal-test.js
@@ -420,7 +420,11 @@ describe('Modal', () => {
 
   describe('closeOnDocumentClick', () => {
     it('is false by default', () => {
-      Modal.defaultProps.closeOnDocumentClick.should.equal(false)
+      wrapperMount(<Modal defaultOpen />)
+
+      assertBodyContains('.ui.dimmer')
+      domEvent.click(document.body)
+      assertBodyContains('.ui.dimmer', true)
     })
     it('closes the modal on document click when true', () => {
       wrapperMount(<Modal defaultOpen closeOnDocumentClick />)
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index 20844c9235..78450d3c3e 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -113,7 +113,6 @@ describe('Popup', () => {
   describe('eventsEnabled ', () => {
     it(`is "true" by default`, () => {
       wrapperMount(<Popup open />)
-      wrapper.should.have.prop('eventsEnabled', true)
 
       const modifiers = wrapper.find('Popper').prop('modifiers')
       const eventListeners = _.find(modifiers, (m) => m.name === 'eventListeners')
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index 897f91229a..0720f3e4d9 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/test/specs/modules/Search/Search-test.js
@@ -125,7 +125,6 @@ describe('Search', () => {
 
   describe('icon', () => {
     it('defaults to a search icon', () => {
-      Search.defaultProps.icon.should.equal('search')
       wrapperMount(<Search />).should.contain.descendants('.search.icon')
     })
   })
diff --git a/test/specs/modules/Sidebar/Sidebar-test.js b/test/specs/modules/Sidebar/Sidebar-test.js
index 21afd96f93..57bd6e4e0e 100644
--- a/test/specs/modules/Sidebar/Sidebar-test.js
+++ b/test/specs/modules/Sidebar/Sidebar-test.js
@@ -20,7 +20,9 @@ describe('Sidebar', () => {
     'slide out',
     'slide along',
   ])
-  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'])
+  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'], {
+    defaultValue: 'left',
+  })
   common.propValueOnlyToClassName(Sidebar, 'width', ['very thin', 'thin', 'wide', 'very wide'])
 
   describe('componentWillUnmount', () => {
diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js
index 14bfcf1003..b662824ff5 100644
--- a/test/specs/modules/Tab/Tab-test.js
+++ b/test/specs/modules/Tab/Tab-test.js
@@ -127,22 +127,18 @@ describe('Tab', () => {
     it('is set when clicking an item', () => {
       const wrapper = mount(<Tab panes={panes} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 1 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 1')
 
       wrapper.find('MenuItem').at(1).simulate('click')
-
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
     })
 
     it('can be set via props', () => {
       const wrapper = mount(<Tab panes={panes} activeIndex={1} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
 
-      wrapper
-        .setProps({ activeIndex: 2 })
-        .find('TabPane[active]')
-        .should.contain.text('Tab 3 Content')
+      wrapper.setProps({ activeIndex: 2 }).find('TabPane').should.contain.text('Tab 3 Content')
     })
 
     it('determines which pane render method is called', () => {
diff --git a/test/specs/modules/Tab/TabPane-test.js b/test/specs/modules/Tab/TabPane-test.js
index 5e69a69f68..d20688af22 100644
--- a/test/specs/modules/Tab/TabPane-test.js
+++ b/test/specs/modules/Tab/TabPane-test.js
@@ -9,7 +9,7 @@ describe('TabPane', () => {
 
   common.implementsCreateMethod(TabPane)
 
-  common.propKeyOnlyToClassName(TabPane, 'active')
+  common.propKeyOnlyToClassName(TabPane, 'active', { defaultValue: 'left' })
   common.propKeyOnlyToClassName(TabPane, 'loading')
 
   it('renders a Segment by default', () => {
diff --git a/test/utils/getComponentProps.js b/test/utils/getComponentProps.js
index 61b81536ef..6e8c28397d 100644
--- a/test/utils/getComponentProps.js
+++ b/test/utils/getComponentProps.js
@@ -13,7 +13,6 @@ export default function getComponentProps(Component) {
 
   return {
     autoControlledProps: Component.autoControlledProps,
-    defaultProps: Component.defaultProps,
     handledProps: Component.handledProps,
     propTypes: Component.propTypes,
   }