diff --git a/.storybook/main.js b/.storybook/main.js
index 0dc5fd2f5f15209da6f955a4938ec65e97fc2048..f4d46fb062f7be4054f52bd4b9a3ca3fec0efb79 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -8,27 +8,21 @@ module.exports = {
     "../frontend/**/*.stories.mdx",
     "../frontend/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: [
-    {
-      name: "@storybook/addon-essentials",
-    },
-    {
-      name: "@storybook/addon-links",
-    },
-    {
-      name: "@storybook/addon-postcss",
-      options: {
-        postcssLoaderOptions: {
-          implementation: require("postcss"),
-        },
-      },
-    },
-  ],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
   webpackFinal: storybookConfig => ({
     ...storybookConfig,
+    module: {
+      ...storybookConfig.module,
+      rules: [
+        ...storybookConfig.module.rules.filter(rule => !isCSSRule(rule)),
+        ...appConfig.module.rules.filter(rule => isCSSRule(rule)),
+      ],
+    },
     resolve: {
       ...storybookConfig.resolve,
       alias: appConfig.resolve.alias,
     },
   }),
 };
+
+const isCSSRule = rule => rule.test.toString() === "/\\.css$/";
diff --git a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationDeleteModal/AuditNotificationDeleteModal.jsx b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationDeleteModal/AuditNotificationDeleteModal.jsx
index f4a6503e2b04c22d9e71bea069627c7165f6365c..be1d32966838061c426fc6cc1bf7bfab332fe596 100644
--- a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationDeleteModal/AuditNotificationDeleteModal.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationDeleteModal/AuditNotificationDeleteModal.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 import { formatChannels } from "metabase/lib/notifications";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import CheckBox from "metabase/components/CheckBox";
 import FormMessage from "metabase/components/form/FormMessage";
 import ModalContent from "metabase/components/ModalContent";
diff --git a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.jsx b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.jsx
index d3b0e02c6425c4b72de14a0e73c4fd15fab8546d..d253d55c66515b228bdaf94bc92450acc6efbb60 100644
--- a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import MetabaseSettings from "metabase/lib/settings";
 import { recipientIsValid } from "metabase/lib/pulse";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import FormMessage from "metabase/components/form/FormMessage";
 import ModalContent from "metabase/components/ModalContent";
 import UserPicker from "metabase/components/UserPicker";
diff --git a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.styled.jsx b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.styled.jsx
index d3390528bec09988d25b0482fab60de7e83aa3f3..bdac77c62c5df696d67ecbc1a7ccf66492cc50b0 100644
--- a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.styled.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.styled.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
diff --git a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditParameters.jsx b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditParameters.jsx
index 8ae3681ac29aac1ae94ed56354473c7aa2f41077..695d290483f49409db06334b04e0b60aeec6d882 100644
--- a/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditParameters.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditParameters.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import _ from "underscore";
 import { AuditParametersInput } from "./AuditParameters.styled";
diff --git a/enterprise/frontend/src/metabase-enterprise/audit_app/components/UnsubscribeUserForm/UnsubscribeUserForm.jsx b/enterprise/frontend/src/metabase-enterprise/audit_app/components/UnsubscribeUserForm/UnsubscribeUserForm.jsx
index dd7c5cde4383a59bc8f5c0af6142244b02c81ec6..2770f380649f4f61223012d23f955b71fba78fea 100644
--- a/enterprise/frontend/src/metabase-enterprise/audit_app/components/UnsubscribeUserForm/UnsubscribeUserForm.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/audit_app/components/UnsubscribeUserForm/UnsubscribeUserForm.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import FormMessage from "metabase/components/form/FormMessage";
 import { ModalMessage } from "./UnsubscribeUserForm.styled";
diff --git a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationActions/ModerationActions.styled.jsx b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationActions/ModerationActions.styled.jsx
index 32aa9583a5812163eeec6a88e509e5405b55576a..8f4308369c5ecc49166b69b3ffffa000a557551b 100644
--- a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationActions/ModerationActions.styled.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationActions/ModerationActions.styled.jsx
@@ -10,7 +10,7 @@ const { name: verifiedIconName, color: verifiedIconColor } = getStatusIcon(
   MODERATION_STATUS.verified,
 );
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const Container = styled.div`
   display: flex;
diff --git a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.jsx b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.jsx
index f15398c45e8a3091fc1558d5034d413901681777..31fce05b3df797605b6d6d578d9297dba4dafef6 100644
--- a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.jsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 
 export const Container = styled.div`
diff --git a/enterprise/frontend/src/metabase-enterprise/sandboxes/components/GTAPModal.jsx b/enterprise/frontend/src/metabase-enterprise/sandboxes/components/GTAPModal.jsx
index 9158a332008bb03b7f6c428daa2528d91949f622..cee827482f22eb93735e9806d932e5d3c69d1b5b 100644
--- a/enterprise/frontend/src/metabase-enterprise/sandboxes/components/GTAPModal.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/sandboxes/components/GTAPModal.jsx
@@ -10,7 +10,7 @@ import MappingEditor from "./MappingEditor";
 
 import QuestionPicker from "metabase/containers/QuestionPicker";
 import QuestionParameterTargetWidget from "../containers/QuestionParameterTargetWidget";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ActionButton from "metabase/components/ActionButton";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import Select, { Option } from "metabase/components/Select";
diff --git a/enterprise/frontend/src/metabase-enterprise/sandboxes/components/MappingEditor.jsx b/enterprise/frontend/src/metabase-enterprise/sandboxes/components/MappingEditor.jsx
index bddf29c841355e893689f310e834a1e9fa8245fa..563be4a058753b8a75365f90f0514e4718d55e57 100644
--- a/enterprise/frontend/src/metabase-enterprise/sandboxes/components/MappingEditor.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/sandboxes/components/MappingEditor.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import _ from "underscore";
 
diff --git a/enterprise/frontend/src/metabase-enterprise/tools/containers/ErrorDetail.jsx b/enterprise/frontend/src/metabase-enterprise/tools/containers/ErrorDetail.jsx
index 298f907781255e160c75a79d4cbe9526669faf30..7af0fa5a8ad474d9fa99fb03a162610c65f4d2f0 100644
--- a/enterprise/frontend/src/metabase-enterprise/tools/containers/ErrorDetail.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/tools/containers/ErrorDetail.jsx
@@ -10,7 +10,7 @@ import { getIn } from "icepick";
 
 import { formatColumn, formatValue } from "metabase/lib/formatting";
 import { CardApi } from "metabase/services";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 import Question from "metabase-lib/lib/Question";
 import { QuestionResultLoader } from "metabase/containers/QuestionResultLoader";
diff --git a/frontend/src/metabase/account/notifications/components/ArchiveModal/ArchiveModal.jsx b/frontend/src/metabase/account/notifications/components/ArchiveModal/ArchiveModal.jsx
index bb54bcd5cb6a9f1e97cd339af9857f532be42589..2bfdd9f1b3dc43ff5e7334d7dccd07fa252f54e9 100644
--- a/frontend/src/metabase/account/notifications/components/ArchiveModal/ArchiveModal.jsx
+++ b/frontend/src/metabase/account/notifications/components/ArchiveModal/ArchiveModal.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
 import Settings from "metabase/lib/settings";
 import { formatDateTimeWithUnit } from "metabase/lib/formatting";
 import { formatChannelRecipients } from "metabase/lib/notifications";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import FormMessage from "metabase/components/form/FormMessage";
 import { ModalMessage } from "./ArchiveModal.styled";
diff --git a/frontend/src/metabase/account/notifications/components/HelpModal/HelpModal.jsx b/frontend/src/metabase/account/notifications/components/HelpModal/HelpModal.jsx
index 204857bb31560a135ff4011384b7ddfe463fa6f7..aadb6c4f2a70b141873b9927421a2370a1f849e5 100644
--- a/frontend/src/metabase/account/notifications/components/HelpModal/HelpModal.jsx
+++ b/frontend/src/metabase/account/notifications/components/HelpModal/HelpModal.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { jt, t } from "ttag";
 import Settings from "metabase/lib/settings";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import { ModalLink, ModalMessage } from "./HelpModal.styled";
 
diff --git a/frontend/src/metabase/account/notifications/components/UnsubscribeModal/UnsubscribeModal.jsx b/frontend/src/metabase/account/notifications/components/UnsubscribeModal/UnsubscribeModal.jsx
index b78f58e32eb63eea7bf53f2920234f4ef2947743..9a3a3a16b72d2dfc896149f9630b8e40c9b0d75e 100644
--- a/frontend/src/metabase/account/notifications/components/UnsubscribeModal/UnsubscribeModal.jsx
+++ b/frontend/src/metabase/account/notifications/components/UnsubscribeModal/UnsubscribeModal.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import FormMessage from "metabase/components/form/FormMessage";
 
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/Sidebar.jsx b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/Sidebar.jsx
index b7bd6c7c2b897c6b67b5c8482b6be10baa184cb7..1fb1d9925b1119df138ebf13fe889fa1092a6960 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/Sidebar.jsx
+++ b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/Sidebar.jsx
@@ -8,7 +8,7 @@ import DeleteDatabaseModal from "metabase/admin/databases/components/DeleteDatab
 import ActionButton from "metabase/components/ActionButton";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import ConfirmContent from "metabase/components/ConfirmContent";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 const propTypes = {
   database: PropTypes.object.isRequired,
diff --git a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
index c1477d8c70f2b24a7cc93b8130cf048a29a2e2dd..ccfbc5f928b87d340deded4013d826ca845f9d3c 100644
--- a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
+++ b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 
 export default class DeleteDatabaseModal extends Component {
diff --git a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.styled.jsx b/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.styled.jsx
index 18254a7be052cf36201c35175049f79b7cf0edc5..78af41a3191f201bc94506d95c0f5f13e04354eb 100644
--- a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.styled.jsx
+++ b/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.styled.jsx
@@ -3,7 +3,7 @@ import { color, lighten } from "metabase/lib/colors";
 import { breakpointMinSmall } from "metabase/styled-components/theme";
 import Icon from "metabase/components/Icon";
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const EngineSearchRoot = styled.div`
   display: block;
diff --git a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
index 84b0948f81746281d5704ffa84b7668673b58112..89ec55bf0a9941fe245e0872a8c8b32326c7b32f 100644
--- a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
+++ b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
@@ -11,7 +11,7 @@ import { Box, Flex } from "grid-styled";
 
 import title from "metabase/hoc/Title";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import Sidebar from "metabase/admin/databases/components/DatabaseEditApp/Sidebar/Sidebar";
 import DriverWarning from "metabase/containers/DriverWarning";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx b/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
index cf17364af1faa50c075fb96b2de789cc222af186..7dd65884898745a3f1d9152870ce4796339d7e77 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
@@ -6,7 +6,7 @@ import { t } from "ttag";
 
 import InputBlurChange from "metabase/components/InputBlurChange";
 import Select, { Option } from "metabase/components/Select";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import * as MetabaseCore from "metabase/lib/core";
 import { isCurrency } from "metabase/lib/schema_metadata";
 import { isFK } from "metabase/lib/types";
diff --git a/frontend/src/metabase/admin/datamodel/containers/MetricListApp.jsx b/frontend/src/metabase/admin/datamodel/containers/MetricListApp.jsx
index 4435955e44cc912e8e70cebf87e180be1c804024..3e015463dd46230220516d5bd791d3d93ae7a541 100644
--- a/frontend/src/metabase/admin/datamodel/containers/MetricListApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/MetricListApp.jsx
@@ -6,7 +6,7 @@ import Metrics from "metabase/entities/metrics";
 import MetricItem from "metabase/admin/datamodel/components/MetricItem";
 import FilteredToUrlTable from "metabase/admin/datamodel/hoc/FilteredToUrlTable";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 
 @Metrics.loadList({ wrapped: true })
diff --git a/frontend/src/metabase/admin/datamodel/containers/SegmentListApp.jsx b/frontend/src/metabase/admin/datamodel/containers/SegmentListApp.jsx
index 8988f710ee5987341c4c26d6d3087e96f63c1e95..ffe6cfd6eb4aaa00748276ae3f5e6965607eb155 100644
--- a/frontend/src/metabase/admin/datamodel/containers/SegmentListApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/SegmentListApp.jsx
@@ -6,7 +6,7 @@ import Segment from "metabase/entities/segments";
 import SegmentItem from "metabase/admin/datamodel/components/SegmentItem";
 import FilteredToUrlTable from "metabase/admin/datamodel/hoc/FilteredToUrlTable";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 
 @Segment.loadList({ wrapped: true })
diff --git a/frontend/src/metabase/admin/people/containers/UserActivationModal.jsx b/frontend/src/metabase/admin/people/containers/UserActivationModal.jsx
index e2a94afd2e825812ba3131e0e177ad032ef3c6d9..223873ae39bd9b88f78111b55a27d8d8451606e6 100644
--- a/frontend/src/metabase/admin/people/containers/UserActivationModal.jsx
+++ b/frontend/src/metabase/admin/people/containers/UserActivationModal.jsx
@@ -6,7 +6,7 @@ import _ from "underscore";
 
 import User from "metabase/entities/users";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import Text from "metabase/components/type/Text";
 
diff --git a/frontend/src/metabase/admin/people/containers/UserPasswordResetModal.jsx b/frontend/src/metabase/admin/people/containers/UserPasswordResetModal.jsx
index aff01c31aabd95fe472fe4c2d1fa191ce87d4211..a1ff44fdaab90b1b0f4022373a72ddb4d5828239 100644
--- a/frontend/src/metabase/admin/people/containers/UserPasswordResetModal.jsx
+++ b/frontend/src/metabase/admin/people/containers/UserPasswordResetModal.jsx
@@ -11,7 +11,7 @@ import { getUserTemporaryPassword } from "../selectors";
 
 import MetabaseSettings from "metabase/lib/settings";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import PasswordReveal from "metabase/components/PasswordReveal";
 
diff --git a/frontend/src/metabase/admin/people/containers/UserSuccessModal.jsx b/frontend/src/metabase/admin/people/containers/UserSuccessModal.jsx
index ff33f5e3bd22f0f305ec4b946fc7b0a87f2be267..467115371642c16e953e44c672cd2fb7a0303678 100644
--- a/frontend/src/metabase/admin/people/containers/UserSuccessModal.jsx
+++ b/frontend/src/metabase/admin/people/containers/UserSuccessModal.jsx
@@ -10,7 +10,7 @@ import User from "metabase/entities/users";
 import { clearTemporaryPassword } from "../people";
 import { getUserTemporaryPassword } from "../selectors";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 import ModalContent from "metabase/components/ModalContent";
 import PasswordReveal from "metabase/components/PasswordReveal";
diff --git a/frontend/src/metabase/admin/permissions/components/CollectionPermissionsModal/CollectionPermissionsModal.jsx b/frontend/src/metabase/admin/permissions/components/CollectionPermissionsModal/CollectionPermissionsModal.jsx
index a5ce3db629bf70b9c641a61da5116219b2358d17..68b31d590db59dc858892b055b8b243d29bc9445 100644
--- a/frontend/src/metabase/admin/permissions/components/CollectionPermissionsModal/CollectionPermissionsModal.jsx
+++ b/frontend/src/metabase/admin/permissions/components/CollectionPermissionsModal/CollectionPermissionsModal.jsx
@@ -12,7 +12,7 @@ import SnippetCollections from "metabase/entities/snippet-collections";
 import { isPersonalCollectionChild } from "metabase/collections/utils";
 
 import ModalContent from "metabase/components/ModalContent";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 import Groups from "metabase/entities/groups";
 
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsEditBar.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsEditBar.jsx
index 046a467204ec79433a6d00062adfd90dd7e433a4..d07756d17539d241a210e2f538f42ab5528b8238 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsEditBar.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsEditBar.jsx
@@ -5,7 +5,7 @@ import cx from "classnames";
 
 import Confirm from "metabase/components/Confirm";
 import EditBar from "metabase/components/EditBar";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import PermissionsConfirm from "../PermissionsConfirm";
 
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.jsx
index 496d761b34064245ce3812ef563bd0745a4ecf4f..d4181c9d752649e5f5b779f5880c73cf6af410f5 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
 import { connect } from "react-redux";
 import { push } from "react-router-redux";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import fitViewport from "metabase/hoc/FitViewPort";
 import Modal from "metabase/components/Modal";
 import ModalContent from "metabase/components/ModalContent";
diff --git a/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.tsx b/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.tsx
index 6858cbe3173b889a0460fefc31542ddbdda4a323..e2f09b85a5a0d96eea5f13b79a5c2a9b3c91c5f8 100644
--- a/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.tsx
+++ b/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import {
   LicenseErrorMessage,
   LicenseTextInput,
diff --git a/frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx
index 32b196ee43d7995ccef58f347bb3c59dbda3ad2a..0d6db2c55506a00b28d0668bfb33cdbd48233e2f 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx
@@ -7,7 +7,7 @@ import _ from "underscore";
 import Collapse from "react-collapse";
 import { t } from "ttag";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import DisclosureTriangle from "metabase/components/DisclosureTriangle";
 import MetabaseUtils from "metabase/lib/utils";
 import SettingsSetting from "./SettingsSetting";
diff --git a/frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx
index 86d27edc7a483c150045a8500821af04defcc889..16335437068bf21b531a06135e8163b892dd2436 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { t } from "ttag";
 import { Flex } from "grid-styled";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import MarginHostingCTA from "metabase/admin/settings/components/widgets/MarginHostingCTA";
 
 import SettingsBatchForm from "./SettingsBatchForm";
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
index b2c5f7876e4359a1ba3daae57abf40585f18f772..d13538ebe80c2f1668095fec4d858cb5b91d5a23 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
@@ -7,7 +7,7 @@ import MetabaseUtils from "metabase/lib/utils";
 import SettingsSetting from "./SettingsSetting";
 import { updateSlackSettings } from "../settings";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import ExternalLink from "metabase/components/ExternalLink";
 
diff --git a/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget.jsx
index 8e23affe03778b37b448ea302329312a3f1726b0..a804a9a77a72c640e50269eeae15920ba4e7fa4f 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget.jsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ModalFooter } from "metabase/components/ModalContent";
 import AdminContentTable from "metabase/components/AdminContentTable";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import GroupSelect from "metabase/admin/people/components/GroupSelect";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
 import Modal from "metabase/components/Modal";
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.styled.tsx b/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.styled.tsx
index dbb97a0d9c5d8ea180d26ae0849965ae2a76cb5e..91a8335b3b17cb455eccb77cc65c3b3043e0b740 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.styled.tsx
@@ -1,4 +1,4 @@
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import styled from "styled-components";
 
 export const SecretKeyWidgetRoot = styled.div`
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.tsx b/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.tsx
index c4e6d6466f18868b63651230fa605f29350d204f..cd56a03da35f6659a2a525e923668e7f575727e5 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SecretKeyWidget/SecretKeyWidget.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import SettingInput from "../SettingInput";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Confirm from "metabase/components/Confirm";
 import { t } from "ttag";
 import { UtilApi } from "metabase/services";
diff --git a/frontend/src/metabase/admin/settings/slack/components/SlackDeleteModal/SlackDeleteModal.tsx b/frontend/src/metabase/admin/settings/slack/components/SlackDeleteModal/SlackDeleteModal.tsx
index eceb3c8c1cd82dbcc29df7d5feb761b48a7ea6a7..aa09277871be3ecbbe558a180c0b7144df3b6fd7 100644
--- a/frontend/src/metabase/admin/settings/slack/components/SlackDeleteModal/SlackDeleteModal.tsx
+++ b/frontend/src/metabase/admin/settings/slack/components/SlackDeleteModal/SlackDeleteModal.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ActionButton from "metabase/components/ActionButton";
 import ModalContent from "metabase/components/ModalContent";
 
diff --git a/frontend/src/metabase/admin/settings/slack/components/SlackSetup/SlackSetup.styled.tsx b/frontend/src/metabase/admin/settings/slack/components/SlackSetup/SlackSetup.styled.tsx
index 7c58b91cc9426e7c2ea96ec6e98b46f681b2a314..ef568e5e980d5426a8b83b351eb4039db6201a59 100644
--- a/frontend/src/metabase/admin/settings/slack/components/SlackSetup/SlackSetup.styled.tsx
+++ b/frontend/src/metabase/admin/settings/slack/components/SlackSetup/SlackSetup.styled.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { color, lighten } from "metabase/lib/colors";
 import { breakpointMinLarge } from "metabase/styled-components/theme";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/components/ExternalLink";
 import SlackHelpCard from "../SlackHelpCard";
 
diff --git a/frontend/src/metabase/admin/settings/slack/components/SlackStatus/SlackStatus.tsx b/frontend/src/metabase/admin/settings/slack/components/SlackStatus/SlackStatus.tsx
index 064c065d2a56812dcfb1c1a5b6b78035ef604854..bb490995cd3dd46952502680b1a21fd015f9e310 100644
--- a/frontend/src/metabase/admin/settings/slack/components/SlackStatus/SlackStatus.tsx
+++ b/frontend/src/metabase/admin/settings/slack/components/SlackStatus/SlackStatus.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentType, useCallback, useMemo, useState } from "react";
 import { jt, t } from "ttag";
 import Settings from "metabase/lib/settings";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/components/ExternalLink";
 import Modal from "metabase/components/Modal";
 import SlackBadge from "../SlackBadge";
diff --git a/frontend/src/metabase/collections/components/BulkActions.jsx b/frontend/src/metabase/collections/components/BulkActions.jsx
index ab07db12f6afa1736f8c9ffe51c101b0318fdcdb..851912c80ce2e17c053fcda4c865c4538b3d81e9 100644
--- a/frontend/src/metabase/collections/components/BulkActions.jsx
+++ b/frontend/src/metabase/collections/components/BulkActions.jsx
@@ -6,7 +6,7 @@ import _ from "underscore";
 
 import { Grid, GridItem } from "metabase/components/Grid";
 import BulkActionBar from "metabase/components/BulkActionBar";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Modal from "metabase/components/Modal";
 import StackedCheckBox from "metabase/components/StackedCheckBox";
 
diff --git a/frontend/src/metabase/components/ActionButton.jsx b/frontend/src/metabase/components/ActionButton.jsx
index 124f57c9a036622bc80a94a22e7aeac2716ba982..5edc065dc526ca79d0466973e3ea737d676a47f8 100644
--- a/frontend/src/metabase/components/ActionButton.jsx
+++ b/frontend/src/metabase/components/ActionButton.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import { cancelable } from "metabase/lib/promise";
 import { t } from "ttag";
diff --git a/frontend/src/metabase/components/AdminPaneLayout.jsx b/frontend/src/metabase/components/AdminPaneLayout.jsx
index f3f93c80f987912a84569e294361132ae271a7a0..1a41817c1e7a3e5fa55456660fb6c20384cb99de 100644
--- a/frontend/src/metabase/components/AdminPaneLayout.jsx
+++ b/frontend/src/metabase/components/AdminPaneLayout.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 
 const AdminPaneTitle = ({
diff --git a/frontend/src/metabase/components/AppErrorCard/AppErrorCard.jsx b/frontend/src/metabase/components/AppErrorCard/AppErrorCard.jsx
index 3e9043d70b2cfd2103445c54ef53f711bce74930..8f7b53707d6a9d1cdb9ee12fe719944beee42b57 100644
--- a/frontend/src/metabase/components/AppErrorCard/AppErrorCard.jsx
+++ b/frontend/src/metabase/components/AppErrorCard/AppErrorCard.jsx
@@ -6,7 +6,7 @@ import { isCypressActive, isProduction } from "metabase/env";
 
 import BodyComponent from "metabase/components/BodyComponent";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { FullscreenCard, FixedCard } from "./AppErrorCard.styled";
 
 const CardComponent = isCypressActive ? FullscreenCard : FixedCard;
diff --git a/frontend/src/metabase/components/ArchiveModal.jsx b/frontend/src/metabase/components/ArchiveModal.jsx
index e792c105d592ff12ef151de47bbf6dd567c21da6..53ad77aa4abcb094687ac93b760103a9e979e93d 100644
--- a/frontend/src/metabase/components/ArchiveModal.jsx
+++ b/frontend/src/metabase/components/ArchiveModal.jsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { t } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 import FormMessage from "metabase/components/form/FormMessage";
 
diff --git a/frontend/src/metabase/components/Button.info.js b/frontend/src/metabase/components/Button.info.js
deleted file mode 100644
index bf55208548486838123929e4fd9655a488aa5012..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/components/Button.info.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import Button from "metabase/components/Button";
-import { t } from "ttag";
-export const component = Button;
-export const category = "input";
-
-export const description = `
-Metabase's main button component.
-`;
-
-export const examples = {
-  "": <Button>{t`Clickity click`}</Button>,
-  primary: <Button primary>{t`Clickity click`}</Button>,
-  "with an icon": <Button icon="star">{t`Clickity click`}</Button>,
-};
diff --git a/frontend/src/metabase/components/Button.styled.jsx b/frontend/src/metabase/components/Button.styled.jsx
index 4c8b0e75d6eebdf542af5e0ff8dd9bce663498ec..a44dc7cc097622f2d80944ca77572d09d31d5e69 100644
--- a/frontend/src/metabase/components/Button.styled.jsx
+++ b/frontend/src/metabase/components/Button.styled.jsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { color } from "metabase/lib/colors";
 
 const FONT_SIZE_VARIANTS = {
diff --git a/frontend/src/metabase/components/ButtonBar.info.js b/frontend/src/metabase/components/ButtonBar.info.js
index 8e6a223f54a079a7690d1cfe4b34c6d6b5b51110..3ca83179f9c16bd11b1e212f2a80333042c6c458 100644
--- a/frontend/src/metabase/components/ButtonBar.info.js
+++ b/frontend/src/metabase/components/ButtonBar.info.js
@@ -1,6 +1,6 @@
 import React from "react";
 import ButtonBar from "metabase/components/ButtonBar";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const component = ButtonBar;
 export const category = "layout";
diff --git a/frontend/src/metabase/components/ButtonWithStatus.jsx b/frontend/src/metabase/components/ButtonWithStatus.jsx
index 0dd460d82d168d24ed9b2cddba487f7d8beae21a..7fa73122e7ae965c925dbe1585585d1c4a7be723 100644
--- a/frontend/src/metabase/components/ButtonWithStatus.jsx
+++ b/frontend/src/metabase/components/ButtonWithStatus.jsx
@@ -2,7 +2,7 @@
 import React, { Component } from "react";
 import { t } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 const defaultTitleForState = {
   default: t`Save`,
diff --git a/frontend/src/metabase/components/ColorPicker.jsx b/frontend/src/metabase/components/ColorPicker.jsx
index 2726e5858320fbab864eebc97845c2c4fad50dba..d9345a207501ab724f364d28cbd54c96e4f2dc43 100644
--- a/frontend/src/metabase/components/ColorPicker.jsx
+++ b/frontend/src/metabase/components/ColorPicker.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import { SketchPicker } from "react-color";
 
diff --git a/frontend/src/metabase/components/ConfirmContent.jsx b/frontend/src/metabase/components/ConfirmContent.jsx
index bcee6ae532e363e5d6ad22258c0e5dd4878e2ac1..ce60a52a82b00048f7e3e6d8b06ab98244e710d3 100644
--- a/frontend/src/metabase/components/ConfirmContent.jsx
+++ b/frontend/src/metabase/components/ConfirmContent.jsx
@@ -4,7 +4,7 @@ import React from "react";
 import ModalContent from "metabase/components/ModalContent";
 import { t } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 const nop = () => {};
 
diff --git a/frontend/src/metabase/components/EmptyState.jsx b/frontend/src/metabase/components/EmptyState.jsx
index e84664d4df5b7378763d9b3b3c06c2e8191a87f0..7d38d03d8633c7a028b76eac2aa302924d6d42eb 100644
--- a/frontend/src/metabase/components/EmptyState.jsx
+++ b/frontend/src/metabase/components/EmptyState.jsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { Box, Flex } from "grid-styled";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import Text from "metabase/components/type/Text";
diff --git a/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js b/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
index 23affa60f3573e7fc4af14758af3161dde0c5595..feb03a301bb30cdc7e515bafe8da7a552a278e61 100644
--- a/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
+++ b/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
@@ -4,7 +4,7 @@ import { PRODUCTS, ORDERS, metadata } from "__support__/sample_dataset_fixture";
 import Dimension from "metabase-lib/lib/Dimension";
 import Card from "metabase/components/Card";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import DimensionInfo from "./DimensionInfo";
 
diff --git a/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js b/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
index c0dc9412a222748bd152f7c13176a074ba311cfe..08e7ff9be3fcf1b445452689a0620d3135bb58fc 100644
--- a/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
+++ b/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
@@ -3,7 +3,7 @@ import React from "react";
 import { PRODUCTS } from "__support__/sample_dataset_fixture";
 import Card from "metabase/components/Card";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Table from "metabase-lib/lib/metadata/Table";
 
 import TableInfo from "./TableInfo";
diff --git a/frontend/src/metabase/components/ModalContent.info.js b/frontend/src/metabase/components/ModalContent.info.js
index e5be0f6d65cb0a1224c5b72824d3f6ecd1e70500..172155f928563d8caeac98c885d28d2fa4a67445 100644
--- a/frontend/src/metabase/components/ModalContent.info.js
+++ b/frontend/src/metabase/components/ModalContent.info.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import ModalContent from "metabase/components/ModalContent";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const component = ModalContent;
 export const category = "modal";
diff --git a/frontend/src/metabase/components/SyncingModal/SyncingModal.tsx b/frontend/src/metabase/components/SyncingModal/SyncingModal.tsx
index b04a49fdd2029fbcf67aa40bb64bd409fc654673..f242e54b8bd79a8df97defec3c596d3d59d79747 100644
--- a/frontend/src/metabase/components/SyncingModal/SyncingModal.tsx
+++ b/frontend/src/metabase/components/SyncingModal/SyncingModal.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { jt, t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 import {
   ModalMessage,
diff --git a/frontend/src/metabase/components/form/CustomForm.jsx b/frontend/src/metabase/components/form/CustomForm.jsx
index 28bb1ab4a1b2d4f832f979c05ef8b1b951a91278..249a6b8132591649c78157d59cbc282f5ac14309 100644
--- a/frontend/src/metabase/components/form/CustomForm.jsx
+++ b/frontend/src/metabase/components/form/CustomForm.jsx
@@ -8,7 +8,7 @@ import FormMessage from "metabase/components/form/FormMessage";
 
 import DisclosureTriangle from "metabase/components/DisclosureTriangle";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ActionButton from "metabase/components/ActionButton";
 
 import _ from "underscore";
diff --git a/frontend/src/metabase/containers/CollectionMoveModal.jsx b/frontend/src/metabase/containers/CollectionMoveModal.jsx
index 8998a01531e68e95afe2f4e53b7263d13f3be6e5..1cc5e9ec18a0a16da12cee0434a562b866521657 100644
--- a/frontend/src/metabase/containers/CollectionMoveModal.jsx
+++ b/frontend/src/metabase/containers/CollectionMoveModal.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 
 import { Flex } from "grid-styled";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 
 import CollectionPicker from "metabase/containers/CollectionPicker";
diff --git a/frontend/src/metabase/core/components/Button/Button.stories.tsx b/frontend/src/metabase/core/components/Button/Button.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84e1338943af3aeb0614c3b2b398069974c38413
--- /dev/null
+++ b/frontend/src/metabase/core/components/Button/Button.stories.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import Button from "./Button";
+
+export default {
+  title: "Core/Button",
+  component: Button,
+};
+
+const Template: ComponentStory<typeof Button> = args => {
+  return <Button {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Default",
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  children: "Primary",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: "chevrondown",
+};
diff --git a/frontend/src/metabase/components/Button.tsx b/frontend/src/metabase/core/components/Button/Button.tsx
similarity index 99%
rename from frontend/src/metabase/components/Button.tsx
rename to frontend/src/metabase/core/components/Button/Button.tsx
index 5ea13857817f4d02f56ebc75a723f42d37d30bb7..8a433f58679dae9f01114fb13cb5b7a5069166d0 100644
--- a/frontend/src/metabase/components/Button.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.tsx
@@ -45,6 +45,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   white?: boolean;
   purple?: boolean;
 
+  disabled?: boolean;
   round?: boolean;
   borderless?: boolean;
   onlyIcon?: boolean;
diff --git a/frontend/src/metabase/core/components/Button/Button.unit.spec.tsx b/frontend/src/metabase/core/components/Button/Button.unit.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b8d0b93c422d53476acc2b05a80fc63634b9551
--- /dev/null
+++ b/frontend/src/metabase/core/components/Button/Button.unit.spec.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Button from "./Button";
+
+describe("Button", () => {
+  const title = "Click";
+
+  it("should render correctly", () => {
+    render(<Button>{title}</Button>);
+
+    expect(screen.getByRole("button", { name: title })).toBeInTheDocument();
+  });
+
+  it("should render correctly with an icon", () => {
+    render(<Button icon="star">{title}</Button>);
+
+    expect(screen.getByRole("img", { name: "star icon" })).toBeInTheDocument();
+  });
+
+  it("should receive focus on tab", () => {
+    render(<Button>{title}</Button>);
+    userEvent.tab();
+
+    expect(screen.getByRole("button")).toHaveFocus();
+  });
+});
diff --git a/frontend/src/metabase/core/components/Button/index.ts b/frontend/src/metabase/core/components/Button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4719be7c09748c989aaf48649c32718ada90465
--- /dev/null
+++ b/frontend/src/metabase/core/components/Button/index.ts
@@ -0,0 +1 @@
+export { default } from "./Button";
diff --git a/frontend/src/metabase/css/components/buttons.css b/frontend/src/metabase/css/components/buttons.css
index 0cc7d140755ca06f16cc57ad9aa65b8e3995f807..a274baabae6c1c6e5532c7993c9bd0a6f402850d 100644
--- a/frontend/src/metabase/css/components/buttons.css
+++ b/frontend/src/metabase/css/components/buttons.css
@@ -22,6 +22,11 @@
   border-color: color-mod(var(--color-border) blackness(12%));
   background: var(--color-bg-light);
   transition: all 200ms linear;
+  transition-property: color, border-color, background-color;
+}
+
+.Button:focus-visible {
+  outline: 2px solid var(--color-brand-light);
 }
 
 @media screen and (--breakpoint-min-lg) {
diff --git a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar.jsx b/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar.jsx
index d0f7dfb1de0c08899b4069703b8b86f516c9a9aa..fab2d7c9246b3c4bd54b9a0bcb8fd0fb7597dc77 100644
--- a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar.jsx
+++ b/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar.jsx
@@ -8,7 +8,7 @@ import cx from "classnames";
 import { color, darken } from "metabase/lib/colors";
 
 import AccordionList from "metabase/components/AccordionList";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import ModalContent from "metabase/components/ModalContent";
diff --git a/frontend/src/metabase/dashboard/components/DashCardCardParameterMapper.styled.jsx b/frontend/src/metabase/dashboard/components/DashCardCardParameterMapper.styled.jsx
index af348b1384be245af61e611ab1a0f2b3704de24b..7fe887377512bcc6dd12ccc55ad1df9cfe3880dd 100644
--- a/frontend/src/metabase/dashboard/components/DashCardCardParameterMapper.styled.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCardCardParameterMapper.styled.jsx
@@ -4,7 +4,7 @@ import { forwardRefToInnerRef } from "metabase/styled-components/utils";
 import { space } from "metabase/styled-components/theme";
 import { color, lighten } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const Container = styled.div`
   margin: ${space(1)} 0;
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx b/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
index 137c929d680cb6465a96285addd072038e66fde7..624988b61a57d624d25037d6d9ea69a9479530ed 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 import ActionButton from "metabase/components/ActionButton";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Header from "metabase/components/Header";
 import Icon from "metabase/components/Icon";
 import Tooltip from "metabase/components/Tooltip";
diff --git a/frontend/src/metabase/dashboard/components/RemoveFromDashboardModal.jsx b/frontend/src/metabase/dashboard/components/RemoveFromDashboardModal.jsx
index 8253d169d7e7d86b2b79f8ee5a4b9343887ee214..251babcf071d255eab07e4369771c0b2aeb318b8 100644
--- a/frontend/src/metabase/dashboard/components/RemoveFromDashboardModal.jsx
+++ b/frontend/src/metabase/dashboard/components/RemoveFromDashboardModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import * as MetabaseAnalytics from "metabase/lib/analytics";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ModalContent from "metabase/components/ModalContent";
 
 export default class RemoveFromDashboardModal extends Component {
diff --git a/frontend/src/metabase/dashboard/components/Sidebar.jsx b/frontend/src/metabase/dashboard/components/Sidebar.jsx
index a16c053d39e0c185bf9eeea5d1097e0cd4b98188..2fd40a01fe3f87564ad8b15d1dc9043eccf6e873 100644
--- a/frontend/src/metabase/dashboard/components/Sidebar.jsx
+++ b/frontend/src/metabase/dashboard/components/Sidebar.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 const WIDTH = 384;
 
diff --git a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
index 238f121f43b20bdc3e199fd4ed1c5539171d0f7c..537efeec1a3d5c035950551b9f4c404f17028af5 100644
--- a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
+++ b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
@@ -11,7 +11,7 @@ import DashboardData from "metabase/dashboard/hoc/DashboardData";
 import { getValuePopulatedParameters } from "metabase/parameters/utils/parameter-values";
 
 import ActionButton from "metabase/components/ActionButton";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Card from "metabase/components/Card";
 import Icon from "metabase/components/Icon";
 import Filter from "metabase/query_builder/components/Filter";
diff --git a/frontend/src/metabase/home/containers/ArchiveApp.jsx b/frontend/src/metabase/home/containers/ArchiveApp.jsx
index 5b1c0f24cc2fb5fe037c9527b3311296ea0a694d..7f536161940715387d6130faf015285e50286bdf 100644
--- a/frontend/src/metabase/home/containers/ArchiveApp.jsx
+++ b/frontend/src/metabase/home/containers/ArchiveApp.jsx
@@ -6,7 +6,7 @@ import { t } from "ttag";
 import { Box, Flex } from "grid-styled";
 
 import ArchivedItem from "../../components/ArchivedItem";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import BulkActionBar from "metabase/components/BulkActionBar";
 import Card from "metabase/components/Card";
 import PageHeading from "metabase/components/type/PageHeading";
diff --git a/frontend/src/metabase/home/homepage/components/DatabaseSection/DatabaseSection.tsx b/frontend/src/metabase/home/homepage/components/DatabaseSection/DatabaseSection.tsx
index 7d0dc3e6b647cccc231f54808920d1eaebf0d1d7..6f5143890826460c8915a740b6bf50d271a96ba5 100644
--- a/frontend/src/metabase/home/homepage/components/DatabaseSection/DatabaseSection.tsx
+++ b/frontend/src/metabase/home/homepage/components/DatabaseSection/DatabaseSection.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Ellipsified from "metabase/components/Ellipsified";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import Tooltip from "metabase/components/Tooltip";
diff --git a/frontend/src/metabase/home/homepage/components/XraySection/XraySection.tsx b/frontend/src/metabase/home/homepage/components/XraySection/XraySection.tsx
index b80f4b42488ba8ad2805f772d84084dac2f35312..18b41283cf34b48e646c085aae6921bac43c8631 100644
--- a/frontend/src/metabase/home/homepage/components/XraySection/XraySection.tsx
+++ b/frontend/src/metabase/home/homepage/components/XraySection/XraySection.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactNode, useState } from "react";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Ellipsified from "metabase/components/Ellipsified";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import Select, { Option } from "metabase/components/Select";
diff --git a/frontend/src/metabase/internal/components/EntitiesApp.jsx b/frontend/src/metabase/internal/components/EntitiesApp.jsx
index 91da6c17c71937973f7c9a6d32385b83f02d30ed..8afdd800d9916601352196b7faf7cadaa60110c4 100644
--- a/frontend/src/metabase/internal/components/EntitiesApp.jsx
+++ b/frontend/src/metabase/internal/components/EntitiesApp.jsx
@@ -8,7 +8,7 @@ import { capitalize } from "metabase/lib/formatting";
 
 import { entities as entityDefs } from "metabase/redux/entities";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Confirm from "metabase/components/Confirm";
 import Link from "metabase/components/Link";
 
diff --git a/frontend/src/metabase/modes/components/TimeseriesFilterWidget.jsx b/frontend/src/metabase/modes/components/TimeseriesFilterWidget.jsx
index ceadef828f0e500a2ce3e34e330750e82b3afd51..8f0c9ff7e0ecfb3d17a8f383780f9047c01d4410 100644
--- a/frontend/src/metabase/modes/components/TimeseriesFilterWidget.jsx
+++ b/frontend/src/metabase/modes/components/TimeseriesFilterWidget.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
 import DatePicker from "metabase/query_builder/components/filters/pickers/DatePicker";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import SelectButton from "metabase/components/SelectButton";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import * as Query from "metabase/lib/query/query";
 import * as Filter from "metabase/lib/query/filter";
diff --git a/frontend/src/metabase/parameters/components/widgets/DateWidget.styled.tsx b/frontend/src/metabase/parameters/components/widgets/DateWidget.styled.tsx
index 03c67bde862bd7b17c6f14b19bbf1880abd70a8f..1782106e60f05e404cff70bebfe82c49d1734c4d 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateWidget.styled.tsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateWidget.styled.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import SpecificDatePicker from "metabase/query_builder/components/filters/pickers/SpecificDatePicker";
 
 export const Container = styled.div`
diff --git a/frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx b/frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx
index f1442656684225da1e8850d09b58c78757de6702..e6bc2a26b5e95170db35743449f3747a92073403 100644
--- a/frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx
@@ -8,7 +8,7 @@ import _ from "underscore";
 import FieldValuesWidget from "metabase/components/FieldValuesWidget";
 import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue/ParameterFieldWidgetValue";
 import Popover from "metabase/components/Popover";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import { normalizeValue } from "./normalizeValue";
 
diff --git a/frontend/src/metabase/public/components/widgets/AdvancedEmbedPane.jsx b/frontend/src/metabase/public/components/widgets/AdvancedEmbedPane.jsx
index 8189d2d4fa4c5e871b35d71f2584517d1848da04..b089bd03241615f3a0d72e26bc52368e6eb79b5b 100644
--- a/frontend/src/metabase/public/components/widgets/AdvancedEmbedPane.jsx
+++ b/frontend/src/metabase/public/components/widgets/AdvancedEmbedPane.jsx
@@ -2,7 +2,7 @@
 import React from "react";
 
 import ToggleLarge from "metabase/components/ToggleLarge";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ActionButton from "metabase/components/ActionButton";
 import { t } from "ttag";
 import AdvancedSettingsPane from "./AdvancedSettingsPane";
diff --git a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
index 6bca80609647f266987ea97c8ff3098254fe0a87..4061f0c10158f2a9dbe4eed246b4165fb4f57b9e 100644
--- a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
+++ b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
@@ -5,7 +5,7 @@ import cx from "classnames";
 
 import { getValuePopulatedParameters } from "metabase/parameters/utils/parameter-values";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ParametersList from "metabase/parameters/components/ParametersList";
 import Select, { Option } from "metabase/components/Select";
 
diff --git a/frontend/src/metabase/pulse/components/PulseEdit.jsx b/frontend/src/metabase/pulse/components/PulseEdit.jsx
index dbcc378e38a0b2a622fd926a048d2b0beb58e359..9bc5b19c88dde0eb34c6d4acd4571747da4843fd 100644
--- a/frontend/src/metabase/pulse/components/PulseEdit.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEdit.jsx
@@ -12,7 +12,7 @@ import PulseEditSkip from "./PulseEditSkip";
 import WhatsAPulse from "./WhatsAPulse";
 
 import ActionButton from "metabase/components/ActionButton";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import DeleteModalWithConfirm from "metabase/components/DeleteModalWithConfirm";
 import Icon from "metabase/components/Icon";
 import * as MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/query_builder/components/AlertModals.jsx b/frontend/src/metabase/query_builder/components/AlertModals.jsx
index 4b6e03b199949e1e488d1d850591270c627fddc7..5cbbf577b261ade42942973bbcbed85333a86bd0 100644
--- a/frontend/src/metabase/query_builder/components/AlertModals.jsx
+++ b/frontend/src/metabase/query_builder/components/AlertModals.jsx
@@ -5,7 +5,7 @@ import { t, jt, ngettext, msgid } from "ttag";
 import _ from "underscore";
 
 // components
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import SchedulePicker from "metabase/components/SchedulePicker";
 import ModalContent from "metabase/components/ModalContent";
 import DeleteModalWithConfirm from "metabase/components/DeleteModalWithConfirm";
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx
index a8ff5df0a6d4e2fb118b093ece7a27b507121f5b..69e2d96dcebcd3ef3d75ebc08f1d2eb949a8cd47 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx
+++ b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 
 import ActionButton from "metabase/components/ActionButton";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import DebouncedFrame from "metabase/components/DebouncedFrame";
 import EditBar from "metabase/components/EditBar";
 
diff --git a/frontend/src/metabase/query_builder/components/ExpressionPopover.jsx b/frontend/src/metabase/query_builder/components/ExpressionPopover.jsx
index b7f1a66a1532ee751619ed24fcad92ebbfc6fc28..674a27ae5193d4a20a4f1055f1fca794ed0cf89e 100644
--- a/frontend/src/metabase/query_builder/components/ExpressionPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/ExpressionPopover.jsx
@@ -2,7 +2,7 @@
 import React from "react";
 
 import ExpressionEditorTextfield from "./expressions/ExpressionEditorTextfield";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import { t } from "ttag";
 import Icon from "metabase/components/Icon";
diff --git a/frontend/src/metabase/query_builder/components/ImpossibleToCreateModelModal/ImpossibleToCreateModelModal.tsx b/frontend/src/metabase/query_builder/components/ImpossibleToCreateModelModal/ImpossibleToCreateModelModal.tsx
index f35bf788c48a414cdf814514619b706016b7a9cb..4b967c1cd852742e0544971d1395fbfe04400485 100644
--- a/frontend/src/metabase/query_builder/components/ImpossibleToCreateModelModal/ImpossibleToCreateModelModal.tsx
+++ b/frontend/src/metabase/query_builder/components/ImpossibleToCreateModelModal/ImpossibleToCreateModelModal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t, jt } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/components/ExternalLink";
 import ModalContent from "metabase/components/ModalContent";
 
diff --git a/frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.jsx b/frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.jsx
index 91e018d45c6d5319eb3aed67e9de5ef24c3add71..591982e4e9f4bc80d02cbcc6bdcf6db8db59e755 100644
--- a/frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.jsx
+++ b/frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.jsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 
 import { turnQuestionIntoDataset } from "metabase/query_builder/actions";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Link from "metabase/components/Link";
 import ModalContent from "metabase/components/ModalContent";
 
diff --git a/frontend/src/metabase/query_builder/components/QuestionActionButtons.jsx b/frontend/src/metabase/query_builder/components/QuestionActionButtons.jsx
index ef767d62b110e9e2a4362a5baf9d50859c984bec..d4a99e0004bda61484bf6f9726389067077c2168 100644
--- a/frontend/src/metabase/query_builder/components/QuestionActionButtons.jsx
+++ b/frontend/src/metabase/query_builder/components/QuestionActionButtons.jsx
@@ -6,7 +6,7 @@ import { checkCanBeModel } from "metabase/lib/data-modeling/utils";
 
 import { MODAL_TYPES } from "metabase/query_builder/constants";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Tooltip from "metabase/components/Tooltip";
 import { Container } from "./QuestionActionButtons.styled";
 
diff --git a/frontend/src/metabase/query_builder/components/RunButton.jsx b/frontend/src/metabase/query_builder/components/RunButton.jsx
index d2b74ba7eaf26a9f14ca23a1d6ac35e3dcb7dce3..45e499027fe282677a7023dee255132ffd94b5c2 100644
--- a/frontend/src/metabase/query_builder/components/RunButton.jsx
+++ b/frontend/src/metabase/query_builder/components/RunButton.jsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import cx from "classnames";
 
diff --git a/frontend/src/metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton.styled.jsx b/frontend/src/metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton.styled.jsx
index 9e67e5ac806ae7f4476217e52d379130e4220ec6..937b676f49cea871ae93e29647a4c2152766c48a 100644
--- a/frontend/src/metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton.styled.jsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const HeaderButton = styled(Button)`
   font-size: 1.25rem;
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterPopoverFooter.jsx b/frontend/src/metabase/query_builder/components/filters/FilterPopoverFooter.jsx
index 4a27bdb22201f0093219da00dd66e0973a2a93b0..c2fb0eadeca53530a774bda35fd6aef07e2e4b29 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterPopoverFooter.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterPopoverFooter.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import cx from "classnames";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import FilterOptions from "./FilterOptions";
 import { getOperator } from "../filters/pickers/DatePicker";
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx
index e1e3a735d0e7727cc93a2d35472436b237b57070..06cfd025961700fc7390877b68dd88a38a822b63 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
 
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Radio from "metabase/components/Radio";
 
 export const FilterRadio = styled(Radio).attrs({
diff --git a/frontend/src/metabase/query_builder/components/notebook/Notebook.jsx b/frontend/src/metabase/query_builder/components/notebook/Notebook.jsx
index afdbc918631964623a43f68b1e0c0a1e2781e7c9..b964a5084e35a575bea09f5eca65294623547e45 100644
--- a/frontend/src/metabase/query_builder/components/notebook/Notebook.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/Notebook.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
 import cx from "classnames";
 import { Box } from "grid-styled";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 import NotebookSteps from "./NotebookSteps";
 
diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx b/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
index 9fc472c59471af21ae5dd97e95e127e6b9047482..d5d7a114f81a8ecbb535e9c8da97acc804408444 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
@@ -10,7 +10,7 @@ import { color as c, lighten, darken } from "metabase/lib/colors";
 
 import Tooltip from "metabase/components/Tooltip";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ExpandingContent from "metabase/components/ExpandingContent";
 import { forwardRefToInnerRef } from "metabase/styled-components/utils";
 
diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx b/frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx
index e340b2cd24d9628b0b77a1043c48172d403abcbf..5a6235fd9fccf963e949a3116466c9f2b04c73fd 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx
@@ -7,7 +7,7 @@ import _ from "underscore";
 import { isReducedMotionPreferred } from "metabase/lib/dom";
 
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { Box, Flex } from "grid-styled";
 import { Motion, spring } from "react-motion";
 
diff --git a/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx b/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
index 626ac778acff6264162166a4f8ede9f7a80a641a..39815c14d57e449e3860053ba1e610a8bc91527d 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { t, jt } from "ttag";
 import Code from "metabase/components/Code";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/components/ExternalLink";
 import MetabaseSettings from "metabase/lib/settings";
 import Utils from "metabase/lib/utils";
diff --git a/frontend/src/metabase/query_builder/components/template_tags/snippet-sidebar/SnippetRow.jsx b/frontend/src/metabase/query_builder/components/template_tags/snippet-sidebar/SnippetRow.jsx
index af97347431333e9427e0d421a880b721cb983e9a..eb13f140fd76334bbcd844ab9773e276b749f865 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/snippet-sidebar/SnippetRow.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/snippet-sidebar/SnippetRow.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
 
 import cx from "classnames";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Snippets from "metabase/entities/snippets";
 
 const ICON_SIZE = 16;
diff --git a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
index d6a4821432555db2f44142d265c40eb839c94199..0b44b47086c76ccfd2bc862426a9fdc132571b18 100644
--- a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
 import _ from "underscore";
 
 import Modal from "metabase/components/Modal";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import Tooltip from "metabase/components/Tooltip";
 import { formatNativeQuery, getEngineNativeType } from "metabase/lib/engine";
diff --git a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.styled.jsx b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.styled.jsx
index 38b7862fd49bb3624bf88841d8da685dc7b0972e..5707936a8b11fe70635d3f72fb12fb48e5975ae1 100644
--- a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.styled.jsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { forwardRefToInnerRef } from "metabase/styled-components/utils";
 
 export const SqlIconButton = forwardRefToInnerRef(styled(Button).attrs({
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx b/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
index 184b452a505dffcc2d6cd316f0cf1ed535ffbf00..7a597e0de8fdac114df2ada9c2af5caca8599fa3 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
 import cx from "classnames";
 
 import Tooltip from "metabase/components/Tooltip";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export default function QuestionNotebookButton({
   className,
diff --git a/frontend/src/metabase/query_builder/components/view/ViewButton.jsx b/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
index 3272c1a81ec2b4c4276515b40748b5b981308e2a..4188a6baf81331513cffd88c315f7a21d880f14f 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
@@ -1,4 +1,4 @@
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import { color, alpha } from "metabase/lib/colors";
 
 import styled from "styled-components";
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/DatasetManagementSection/DatasetManagementSection.styled.jsx b/frontend/src/metabase/query_builder/components/view/sidebars/DatasetManagementSection/DatasetManagementSection.styled.jsx
index 63f0d7bb613816a6cf6eeb8046bdbf0bd74b3dcf..eb324937a198524b363b8f3fb18ef7f07c97ab12 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/DatasetManagementSection/DatasetManagementSection.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/DatasetManagementSection/DatasetManagementSection.styled.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import DefaultButton from "metabase/components/Button";
+import DefaultButton from "metabase/core/components/Button";
 import { color } from "metabase/lib/colors";
 
 export const SectionTitle = styled.span`
diff --git a/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx b/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
index a3377baf38af544a54ef1aed97cc8d7232f31ece..3349bcd43ad06eece0e956c65c82a6db459d32e7 100644
--- a/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
+++ b/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
@@ -9,7 +9,7 @@ import L from "metabase/components/List.css";
 import Icon from "metabase/components/Icon";
 import InputBlurChange from "metabase/components/InputBlurChange";
 import Ellipsified from "metabase/components/Ellipsified";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 const EditableReferenceHeader = ({
   entity = {},
diff --git a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.tsx b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.tsx
index f1264ebac1a4f030f915d7b7bc3b3dd77810d869..40d95cb85e60e7323d6f5469c4e76a1cf8a6a491 100644
--- a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.tsx
+++ b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { t } from "ttag";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import ActiveStep from "../ActiveStep";
 import InactiveStep from "../InvactiveStep";
 import { Locale, LocaleData } from "../../types";
diff --git a/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx b/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
index 6cc10adbdeb3e98485f92ae0260a6be52b730bf5..64927c86b64d62882cacf7433b8367ba23a39ec1 100644
--- a/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
+++ b/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const FormRoot = styled.div`
   position: relative;
diff --git a/frontend/src/metabase/setup/components/SetupSection/SetupSection.styled.tsx b/frontend/src/metabase/setup/components/SetupSection/SetupSection.styled.tsx
index 687fd2c6cb0a24facfa06112fd2f4ed8d75aef72..8f2f02071265e9feae473e0375047b048ea39683 100644
--- a/frontend/src/metabase/setup/components/SetupSection/SetupSection.styled.tsx
+++ b/frontend/src/metabase/setup/components/SetupSection/SetupSection.styled.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const SectionRoot = styled.div`
   margin-top: 1.5rem;
diff --git a/frontend/src/metabase/setup/components/WelcomePage/WelcomePage.styled.tsx b/frontend/src/metabase/setup/components/WelcomePage/WelcomePage.styled.tsx
index 654e60132e110ba96980cb270d2c9e5f969fa7eb..e12a69d31131919c9cf2ac3b1e74305ae74097c1 100644
--- a/frontend/src/metabase/setup/components/WelcomePage/WelcomePage.styled.tsx
+++ b/frontend/src/metabase/setup/components/WelcomePage/WelcomePage.styled.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 
 export const PageRoot = styled.div`
   display: flex;
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
index 7c4803238259ad27baa97ce84cb37cf758e0e210..3c651adace74541de3ce434eb4d0479802c6daf2 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettings.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -6,7 +6,7 @@ import _ from "underscore";
 import { t } from "ttag";
 import Warnings from "metabase/query_builder/components/Warnings";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Radio from "metabase/components/Radio";
 
 import Visualization from "metabase/visualizations/components/Visualization";
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
index 7754779be2b15786c0f45f4891662cb3552844ce..e8bad557b313adf402581a5041c8030889c8dfd7 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
@@ -7,7 +7,7 @@ import _ from "underscore";
 import { color, normal } from "metabase/lib/colors";
 
 import ColorPicker from "metabase/components/ColorPicker";
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import NumericInput from "metabase/components/NumericInput";
 
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index 493334d2196c9c5a01c2bfc8e0788cd2e38bd682..a2306d5d79ed44175911e80ec4951243a276ab31 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { t, jt } from "ttag";
 
-import Button from "metabase/components/Button";
+import Button from "metabase/core/components/Button";
 import Icon from "metabase/components/Icon";
 import Select, { Option } from "metabase/components/Select";
 import Radio from "metabase/components/Radio";
diff --git a/frontend/test/metabase/components/Button.unit.spec.js b/frontend/test/metabase/components/Button.unit.spec.js
deleted file mode 100644
index 410d481f845a9988798acb7d6219fa49a46ff4cb..0000000000000000000000000000000000000000
--- a/frontend/test/metabase/components/Button.unit.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-
-import Button from "metabase/components/Button";
-
-describe("Button", () => {
-  const title = "Clickity click";
-
-  it("should render correctly", () => {
-    render(<Button>{title}</Button>);
-
-    // this is why `getByRole()` is so handy and preferred by RTL creators
-    // name is derived from text content: https://www.w3.org/TR/wai-aria-practices-1.1/#naming_techniques
-    screen.getByRole("button", { name: title });
-  });
-
-  it("should render correctly with an icon", () => {
-    render(<Button icon="star">{title}</Button>);
-
-    screen.getByRole("img", { name: "star icon" });
-  });
-
-  it("should render a primary button given the primary prop", () => {
-    render(<Button primary>{title}</Button>);
-
-    expect(screen.getByRole("button")).toHaveClass("Button--primary");
-  });
-});
diff --git a/package.json b/package.json
index 5b6df57159c1d33b815356cbfddc5303f3cdbb9f..8a84edefb517777a0ec0ce5bd55d936c0f6fabe4 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,6 @@
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
-    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-webpack5": "^6.3.12",
     "@storybook/manager-webpack5": "^6.3.12",
     "@storybook/react": "^6.3.12",