LITE-30099: Update button component to match the design

components/src/stories/Button.mdx

@@ -0,0 +1,12 @@
+import { Meta, ArgsTable } from '@storybook/blocks';
+import { Figma } from '@storybook/addon-designs/blocks';
+
+<Meta title="Components/Button/Design" />
+
+# Button Design Specification
+
+<Figma
+  url="https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?type=design&node-id=1-4009&mode=design&t=5CPLKuHbPQnKMEJh-0"
+  height="1000%"
+/>
+<ArgsTable of={Figma} />

components/src/stories/Button.stories.js

@@ -3,16 +3,42 @@ import registerWidget from '~core/registerWidget';
 
 registerWidget('ui-button', Button);
 
-export const Component = {
+export const Base = {
+  name: 'Base component',
   render: (args) => ({
     setup() {
-      return { args };
+      const showAlert = () => alert('The button was clicked');
+      return { args, showAlert };
     },
-    template: `<ui-button disabled v-bind="args"></ui-button>`,
+    template: '<ui-button v-bind="args" @clicked="showAlert" />',
   }),
+  args: {
+    mode: 'solid',
+    size: 'large',
+    label: 'Accept',
+    icon: 'googleCheckBaseline',
+    iconRight: '',
+    color: '#2C98F0',
+    progress: false,
+    lowerCase: false,
+    onlyIcon: false,
+    disabled: false,
+  },
+};
 
+export const Slotted = {
+  name: 'Using the default slot',
+  render: (args) => ({
+    setup() {
+      const showAlert = () => alert('The button was clicked');
+      return { args, showAlert };
+    },
+    template:
+      '<ui-button v-bind="args" @clicked="showAlert"><pre style="background-color:darkblue;color:lightcyan;font-style:italic;">Custom slot content</pre></ui-button>',
+  }),
   args: {
-    text: 'Text',
+    ...Base.args,
+    label: '',
   },
 };
 
@@ -23,6 +49,15 @@ export default {
     layout: 'centered',
   },
   argTypes: {
-    text: 'text',
+    mode: { control: 'radio', options: ['solid', 'flat', 'outlined'] },
+    size: { control: 'radio', options: ['small', 'large'] },
+    label: 'text',
+    icon: 'text',
+    iconRight: 'text',
+    color: 'text',
+    progress: 'boolean',
+    lowerCase: 'boolean',
+    onlyIcon: 'boolean',
+    disabled: 'boolean',
   },
 };

components/src/stories/Menu.stories.js

@@ -13,8 +13,11 @@ export const Component = {
     template: `
       <ui-menu v-bind="args">
         <ui-button 
-          slot="trigger" 
-          text="open menu" 
+          slot="trigger"
+          iconRight="googleArrowDropDownBaseline"
+          label="open menu" 
+          mode="flat"
+          size="small"
         />
         <div style="padding:8px 16px; border:1px solid black;" slot="content">
           <p>Lorem ipsum dolor sit amet</p>