(superset) 02/07: Improve button

[beto]

This is an automated email from the ASF dual-hosted git repository.

beto pushed a commit to branch semantic-layer-ui-semantic-layer
in repository https://gitbox.apache.org/repos/asf/superset.git

commit fab1afc51cd8553c935e5cb0cc0acc22147c8c71
Author: Beto Dealmeida <robe...@dealmeida.net>
AuthorDate: Fri Feb 13 11:30:41 2026 -0500

    Improve button
---
 superset-frontend/src/pages/DatabaseList/index.tsx | 74 ++++++++++------------
 1 file changed, 35 insertions(+), 39 deletions(-)

diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx 
b/superset-frontend/src/pages/DatabaseList/index.tsx
index a4eb6a9cf68..bf0d2206d54 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -23,7 +23,7 @@ import {
   isFeatureEnabled,
   FeatureFlag,
 } from '@superset-ui/core';
-import { styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/ui';
 import { useState, useMemo, useEffect, useCallback } from 'react';
 import rison from 'rison';
 import { useSelector } from 'react-redux';
@@ -38,9 +38,9 @@ import {
 import withToasts from 'src/components/MessageToasts/withToasts';
 import SubMenu, { SubMenuProps } from 'src/features/home/SubMenu';
 import {
+  Button,
   DeleteModal,
-  DropdownButton,
-  Menu,
+  Dropdown,
   Tooltip,
   List,
   Loading,
@@ -332,49 +332,45 @@ function DatabaseList({
       handleDatabaseEditModal({ modalOpen: true });
 
     if (isFeatureEnabled(FeatureFlag.SemanticLayers)) {
-      const dropdownMenu = (
-        <Menu
-          items={[
-            {
-              key: 'database',
-              label: t('Database'),
-              onClick: openDatabaseModal,
-            },
-            {
-              key: 'semantic-layer',
-              label: t('Semantic Layer'),
-              onClick: () => {
-                // TODO: open semantic layer creation flow
-              },
-            },
-          ]}
-        />
-      );
-
       menuData.buttons = [
         {
           name: t('New'),
           buttonStyle: 'primary',
           component: (
-            <DropdownButton
-              data-test="btn-create-new"
-              type="primary"
-              onClick={openDatabaseModal}
-              popupRender={() => dropdownMenu}
-              icon={
-                <Icons.DownOutlined
-                  iconSize="xs"
-                  iconColor={theme.colorTextLightSolid}
-                />
-              }
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: 'database',
+                    label: t('Database'),
+                    onClick: openDatabaseModal,
+                  },
+                  {
+                    key: 'semantic-layer',
+                    label: t('Semantic Layer'),
+                    onClick: () => {
+                      // TODO: open semantic layer creation flow
+                    },
+                  },
+                ],
+              }}
               trigger={['click']}
             >
-              <Icons.PlusOutlined
-                iconSize="m"
-                iconColor={theme.colorTextLightSolid}
-              />
-              {t('New')}
-            </DropdownButton>
+              <Button
+                data-test="btn-create-new"
+                buttonStyle="primary"
+                icon={<Icons.PlusOutlined iconSize="m" />}
+              >
+                {t('New')}
+                <Icons.DownOutlined
+                  iconSize="s"
+                  css={css`
+                    margin-left: ${theme.sizeUnit * 1.5}px;
+                    margin-right: -${theme.sizeUnit * 2}px;
+                  `}
+                />
+              </Button>
+            </Dropdown>
           ),
         },
       ];