diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
new file mode 100644
index 00000000000..d13e5dcdf0d
--- /dev/null
+++ b/docs/api/datetime-button.md
@@ -0,0 +1,76 @@
+---
+title: "ion-datetime-button"
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@site/static/auto-generated/datetime-button/props.md';
+import Events from '@site/static/auto-generated/datetime-button/events.md';
+import Methods from '@site/static/auto-generated/datetime-button/methods.md';
+import Parts from '@site/static/auto-generated/datetime-button/parts.md';
+import CustomProps from '@site/static/auto-generated/datetime-button/custom-props.md';
+import Slots from '@site/static/auto-generated/datetime-button/slots.md';
+
+
+ ion-datetime-button: Ionic API Input for interacting with Datetime picker
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+import APITOCInline from '@components/page/api/APITOCInline';
+
+
+
+Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
+
+## Overview
+
+Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/datetime-button/basic/index.md';
+
+
+
+## Localization
+
+The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details.
+
+## Usage with Modals and Popovers
+
+`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
+
+
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 9770cef8b7e..4e051a731af 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -94,6 +94,10 @@ While seconds and milliseconds can be specified using the ISO 8601 datetime form
+## Usage with Datetime Button
+
+If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
## Date Constraints
### Max and Min Dates
diff --git a/sidebars.js b/sidebars.js
index 4ab111c7ae3..e6231ae0a68 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -287,7 +287,7 @@ module.exports = {
type: 'category',
label: 'Date & Time Pickers',
collapsed: false,
- items: ['api/datetime', 'api/picker'],
+ items: ['api/datetime', 'api/datetime-button', 'api/picker'],
},
{
type: 'category',
diff --git a/static/usage/datetime-button/basic/angular.md b/static/usage/datetime-button/basic/angular.md
new file mode 100644
index 00000000000..80a6ffe3724
--- /dev/null
+++ b/static/usage/datetime-button/basic/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/datetime-button/basic/demo.html b/static/usage/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..8271b6ee9cf
--- /dev/null
+++ b/static/usage/datetime-button/basic/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/datetime-button/basic/index.md b/static/usage/datetime-button/basic/index.md
new file mode 100644
index 00000000000..55e9b3155a1
--- /dev/null
+++ b/static/usage/datetime-button/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/datetime-button/basic/javascript.md b/static/usage/datetime-button/basic/javascript.md
new file mode 100644
index 00000000000..3b39203bb90
--- /dev/null
+++ b/static/usage/datetime-button/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/datetime-button/basic/react.md b/static/usage/datetime-button/basic/react.md
new file mode 100644
index 00000000000..2fe97bd73a0
--- /dev/null
+++ b/static/usage/datetime-button/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/datetime-button/basic/vue.md b/static/usage/datetime-button/basic/vue.md
new file mode 100644
index 00000000000..1272d768b88
--- /dev/null
+++ b/static/usage/datetime-button/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```