diff --git a/packages/core/components.d.ts b/packages/core/components.d.ts
index 829d2fd7..232d1a4f 100644
--- a/packages/core/components.d.ts
+++ b/packages/core/components.d.ts
@@ -47,6 +47,12 @@ declare module 'vue' {
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    ELXButton: typeof import('./src/components/ELXButton/index.vue')['default']
+    ELXClearButton: typeof import('./src/components/ELXButton/components/ELXClearButton.vue')['default']
+    ELXLoadingButton: typeof import('./src/components/ELXButton/components/ELXLoadingButton.vue')['default']
+    ELXSendButton: typeof import('./src/components/ELXButton/components/ELXSendButton.vue')['default']
+    ELXSpeechButton: typeof import('./src/components/ELXButton/components/ELXSpeechButton.vue')['default']
+    ELXSpeechLoadingButton: typeof import('./src/components/ELXButton/components/ELXSpeechLoadingButton.vue')['default']
     Excel: typeof import('./src/components/FilesCard/fileSvg/excel.vue')['default']
     File: typeof import('./src/components/FilesCard/fileSvg/file.vue')['default']
     FilesCard: typeof import('./src/components/FilesCard/index.vue')['default']
diff --git a/packages/core/src/components.ts b/packages/core/src/components.ts
index 0c93aa1e..2b42e742 100644
--- a/packages/core/src/components.ts
+++ b/packages/core/src/components.ts
@@ -5,6 +5,7 @@ export { default as BubbleList } from './components/BubbleList/index.vue';
 export { default as ConfigProvider } from './components/ConfigProvider/index.vue';
 export { default as Conversations } from './components/Conversations/index.vue';
 export { default as EditorSender } from './components/EditorSender/index.vue';
+export { default as ELXButton } from './components/ELXButton/index.vue';
 export { default as FilesCard } from './components/FilesCard/index.vue';
 export { default as MentionSender } from './components/MentionSender/index.vue';
 export { default as Prompts } from './components/Prompts/index.vue';
diff --git a/packages/core/src/components/ELXButton/components/ELXClearButton.vue b/packages/core/src/components/ELXButton/components/ELXClearButton.vue
new file mode 100644
index 00000000..8ffbe2ec
--- /dev/null
+++ b/packages/core/src/components/ELXButton/components/ELXClearButton.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Brush } from '@element-plus/icons-vue';
+</script>
+
+<template>
+  <!-- ClearButton 清理按钮 -->
+  <el-icon><Brush /></el-icon>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/core/src/components/ELXButton/components/ELXLoadingButton.vue b/packages/core/src/components/ELXButton/components/ELXLoadingButton.vue
new file mode 100644
index 00000000..764c827a
--- /dev/null
+++ b/packages/core/src/components/ELXButton/components/ELXLoadingButton.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- LoadingButton loading 按钮 -->
+  <svg
+    class="loading-svg"
+    viewBox="0 0 1000 1000"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Loading</title>
+    <rect
+      fill="currentColor"
+      height="250"
+      rx="24"
+      ry="24"
+      width="250"
+      x="375"
+      y="375"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      opacity="0.45"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      stroke-dasharray="600 9999999"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="1s"
+        from="0 500 500"
+        repeatCount="indefinite"
+        to="360 500 500"
+        type="rotate"
+      />
+    </circle>
+  </svg>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/core/src/components/ELXButton/components/ELXSendButton.vue b/packages/core/src/components/ELXButton/components/ELXSendButton.vue
new file mode 100644
index 00000000..367aa115
--- /dev/null
+++ b/packages/core/src/components/ELXButton/components/ELXSendButton.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Top } from '@element-plus/icons-vue';
+</script>
+
+<template>
+  <!-- SendButton 发送按钮 -->
+  <el-icon><Top /></el-icon>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/core/src/components/ELXButton/components/ELXSpeechButton.vue b/packages/core/src/components/ELXButton/components/ELXSpeechButton.vue
new file mode 100644
index 00000000..92510fd8
--- /dev/null
+++ b/packages/core/src/components/ELXButton/components/ELXSpeechButton.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Microphone } from '@element-plus/icons-vue';
+</script>
+
+<template>
+  <!-- SpeechButton 语音按钮 -->
+  <el-icon><Microphone /></el-icon>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/core/src/components/ELXButton/components/ELXSpeechLoadingButton.vue b/packages/core/src/components/ELXButton/components/ELXSpeechLoadingButton.vue
new file mode 100644
index 00000000..d885a4c3
--- /dev/null
+++ b/packages/core/src/components/ELXButton/components/ELXSpeechLoadingButton.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ className?: string }>(), {
+  className: 'loading-svg'
+});
+
+// 定义常量
+const SIZE = 1000;
+const COUNT = 4;
+const RECT_WIDTH = 140;
+const RECT_RADIUS = RECT_WIDTH / 2;
+const RECT_HEIGHT_MIN = 250;
+const RECT_HEIGHT_MAX = 500;
+const DURATION = 0.8;
+
+// 计算矩形的位置和高度范围
+const rects = computed(() => {
+  const dest = (SIZE - RECT_WIDTH * COUNT) / (COUNT - 1);
+  return Array.from({ length: COUNT }).map((_, index) => {
+    const x = index * (dest + RECT_WIDTH);
+    const yMin = SIZE / 2 - RECT_HEIGHT_MIN / 2;
+    const yMax = SIZE / 2 - RECT_HEIGHT_MAX / 2;
+    return { x, yMin, yMax };
+  });
+});
+</script>
+
+<template>
+  <svg
+    :class="className"
+    color="currentColor"
+    :viewBox="`0 0 ${SIZE} ${SIZE}`"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Speech Recording</title>
+
+    <template v-for="(item, index) in rects" :key="index">
+      <rect
+        fill="currentColor"
+        :rx="RECT_RADIUS"
+        :ry="RECT_RADIUS"
+        :height="RECT_HEIGHT_MIN"
+        :width="RECT_WIDTH"
+        :x="item.x"
+        :y="item.yMin"
+      >
+        <animate
+          attributeName="height"
+          :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
+          keyTimes="0; 0.5; 1"
+          :dur="`${DURATION}s`"
+          :begin="`${(DURATION / COUNT) * index}s`"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="y"
+          :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
+          keyTimes="0; 0.5; 1"
+          :dur="`${DURATION}s`"
+          :begin="`${(DURATION / COUNT) * index}s`"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </template>
+  </svg>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/core/src/components/ELXButton/index.ts b/packages/core/src/components/ELXButton/index.ts
new file mode 100644
index 00000000..c2c0b1db
--- /dev/null
+++ b/packages/core/src/components/ELXButton/index.ts
@@ -0,0 +1,60 @@
+import type { SetupContext } from 'vue';
+import { buttonEmits, buttonProps } from 'element-plus';
+
+export const elxButtonTypes = [
+  'clear',
+  'loading',
+  'send',
+  'speech',
+  'speechLoading',
+  ''
+] as const;
+
+export const elxButtonProps = {
+  /**
+   * @description xButton type
+   */
+  elxButtonType: {
+    type: String,
+    values: elxButtonTypes,
+    default: ''
+  },
+  ...buttonProps
+};
+
+export const elxButtonEmits = {
+  clear: (evt: MouseEvent) => evt instanceof MouseEvent,
+  cancel: (evt: MouseEvent) => evt instanceof MouseEvent,
+  submit: (evt: MouseEvent) => evt instanceof MouseEvent,
+  ...buttonEmits
+};
+
+export type ELXButtonProps = Partial<ExtractPropTypes<typeof elxButtonProps>>;
+export type ELXButtonEmits = typeof elxButtonEmits;
+export type ELXButtonType = ELXButtonProps['elxButtonType'];
+
+export function useButton(
+  props: ELXButtonProps,
+  emit: SetupContext<ELXButtonEmits>['emit']
+) {
+  const handleClick = (evt: MouseEvent) => {
+    if (props.disabled || props.loading) {
+      evt.stopPropagation();
+      return;
+    }
+    if (props.elxButtonType?.trim()?.length) {
+      if (props.elxButtonType === 'clear') {
+        return emit('clear', evt);
+      } else if (['loading', 'speechLoading'].includes(props.elxButtonType)) {
+        return emit('cancel', evt);
+      } else if (props.elxButtonType === 'send') {
+        return emit('submit', evt);
+      }
+    }
+    emit('click', evt);
+  };
+
+  return {
+    handleClick
+  };
+}
diff --git a/packages/core/src/components/ELXButton/index.vue b/packages/core/src/components/ELXButton/index.vue
new file mode 100644
index 00000000..b1133d82
--- /dev/null
+++ b/packages/core/src/components/ELXButton/index.vue
@@ -0,0 +1,79 @@
+<!-- ClearButton 清理按钮 -->
+<script setup lang="ts">
+import type { ELXButtonType } from '@components/ELXButton/index.ts';
+import {
+  elxButtonEmits,
+  elxButtonProps,
+  useButton
+} from '@components/ELXButton/index.ts';
+import { ElButton } from 'element-plus';
+import { h } from 'vue';
+import ELXClearButton from './components/ELXClearButton.vue';
+import ELXLoadingButton from './components/ELXLoadingButton.vue';
+import ELXSendButton from './components/ELXSendButton.vue';
+import ELXSpeechButton from './components/ELXSpeechButton.vue';
+import ELXSpeechButtonLoading from './components/ELXSpeechLoadingButton.vue';
+
+const props = defineProps(elxButtonProps);
+const emit = defineEmits(elxButtonEmits);
+const slots = useSlots();
+
+const { handleClick } = useButton(props, emit);
+
+const elxButtonTypeEmpty = computed(() => {
+  return props.elxButtonType?.trim()?.length > 0;
+});
+
+const classNameVars = computed(() => {
+  const classNames = ['elx-button'];
+  if (elxButtonTypeEmpty.value) {
+    classNames.push(`elx-button-type-${props.elxButtonType}`);
+  }
+  return classNames.join(' ');
+});
+
+const ELXButtonMap: Record<ELXButtonType & string, Component> = {
+  clear: ELXClearButton,
+  loading: ELXLoadingButton,
+  send: ELXSendButton,
+  speech: ELXSpeechButton,
+  speechLoading: ELXSpeechButtonLoading
+};
+
+const handleDefaultSlot = computed(() => {
+  return h(ELXButtonMap[props.elxButtonType] ?? slots.default);
+});
+
+const coverProps = computed(() => {
+  let circle = props.circle;
+  let loading = props.loading;
+  if (elxButtonTypeEmpty.value) {
+    circle = true;
+    loading = false;
+  }
+  return {
+    circle,
+    loading
+  };
+});
+</script>
+
+<template>
+  <component
+    :is="
+      h(
+        ElButton,
+        {
+          ...$attrs,
+          ...props,
+          ...coverProps,
+          class: classNameVars,
+          onClick: handleClick
+        },
+        { ...$slots, default: () => handleDefaultSlot }
+      )
+    "
+  />
+</template>
+
+<style scoped lang="scss" src="./style.scss"></style>
diff --git a/packages/core/src/components/ELXButton/style.scss b/packages/core/src/components/ELXButton/style.scss
new file mode 100644
index 00000000..af286fb9
--- /dev/null
+++ b/packages/core/src/components/ELXButton/style.scss
@@ -0,0 +1,32 @@
+.elx-button {
+  &.elx-button-type-clear {
+    .el-icon {
+      // 旋转180
+      transform: rotate(180deg);
+    }
+  }
+
+  &.elx-button-type-loading {
+    padding: 0;
+
+    .loading-svg {
+      color: var(--el-color-primary);
+      width: 100%;
+    }
+  }
+
+  &.elx-button-type-send {
+  }
+
+  &.elx-button-type-speech {
+  }
+
+  &.elx-button-type-speechLoading {
+    padding: 0;
+
+    .loading-svg {
+      color: var(--el-color-primary);
+      width: 16px;
+    }
+  }
+}
diff --git a/packages/core/src/stories/ELXButton/ELXButton.stories.ts b/packages/core/src/stories/ELXButton/ELXButton.stories.ts
new file mode 100644
index 00000000..3bc2e06b
--- /dev/null
+++ b/packages/core/src/stories/ELXButton/ELXButton.stories.ts
@@ -0,0 +1,75 @@
+import type ELXButtonSource from '@components/ELXButton/index.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import ELXButtonSlot from './ELXButtonSlot.vue';
+import ELXButton from './index.vue';
+
+const meta: Meta<typeof ELXButtonSource> = {
+  title: 'Example/ELXButton',
+  component: ELXButton,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'default', 'small']
+    },
+    disabled: {
+      control: 'boolean'
+    }
+  },
+  args: {}
+} satisfies Meta<typeof ELXButtonSource>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ELXButtonDemo: Story = {
+  render: _args => ({
+    setup() {
+      return {
+        attrs: _args
+      };
+    },
+    components: { ELXButton },
+    template: `
+      <ELXButton v-bind="attrs" />
+    `
+  })
+};
+
+export const ELXButtonSlotDemo: Story = {
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'success', 'warning', 'danger', 'info']
+    },
+    loading: {
+      control: 'boolean'
+    },
+    circle: {
+      control: 'boolean'
+    },
+    round: {
+      control: 'boolean'
+    },
+    color: {
+      control: 'text'
+    },
+    icon: {
+      control: 'text'
+    }
+  },
+  args: {
+    type: 'primary'
+  },
+  render: _args => ({
+    setup() {
+      return {
+        attrs: _args
+      };
+    },
+    components: { ELXButtonSlot },
+    template: `
+      <ELXButtonSlot v-bind="attrs" />
+    `
+  })
+};
diff --git a/packages/core/src/stories/ELXButton/ELXButtonSlot.vue b/packages/core/src/stories/ELXButton/ELXButtonSlot.vue
new file mode 100644
index 00000000..28d9e482
--- /dev/null
+++ b/packages/core/src/stories/ELXButton/ELXButtonSlot.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { action } from '@storybook/addon-actions';
+import { ELXButton } from '../../components';
+
+function logClick(...ags: any[]) {
+  if (arguments.length >= 2) {
+    action(ags[0])(...ags.splice(1));
+  }
+}
+
+function handleClickEvent(evt: MouseEvent) {
+  logClick('点击事件：', evt);
+}
+</script>
+
+<template>
+  <div class="elx-button-wrapper">
+    <view class="elx-button-row">
+      <div>自定义按钮</div>
+      <ELXButton v-bind="$attrs" @click="handleClickEvent">
+        <span>点点看Actions</span>
+      </ELXButton>
+    </view>
+
+    <view class="elx-button-row">
+      <div>自定义loading slot</div>
+      <ELXButton v-bind="$attrs">
+        <template #loading>
+          <div class="custom-loading">
+            <svg class="circular" viewBox="-10, -10, 50, 50">
+              <path
+                class="path"
+                d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          "
+                style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+              />
+            </svg>
+          </div>
+        </template>
+        Loading
+      </ELXButton>
+    </view>
+  </div>
+</template>
+
+<style scoped lang="less">
+.elx-button-wrapper {
+  width: 100%;
+  height: 95vh;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .elx-button-row {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .custom-loading {
+    .circular {
+      margin-right: 6px;
+      width: 18px;
+      height: 18px;
+      animation: loading-rotate 2s linear infinite;
+
+      .path {
+        animation: loading-dash 1.5s ease-in-out infinite;
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: 0;
+        stroke-width: 2;
+        stroke: var(--el-button-text-color);
+        stroke-linecap: round;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/src/stories/ELXButton/index.vue b/packages/core/src/stories/ELXButton/index.vue
new file mode 100644
index 00000000..590ecd26
--- /dev/null
+++ b/packages/core/src/stories/ELXButton/index.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ELXButtonProps } from '@components/ELXButton/index.ts';
+import { action } from '@storybook/addon-actions';
+import { ELXButton } from '../../components';
+
+function logClick(...ags: any[]) {
+  if (arguments.length >= 2) {
+    action(ags[0])(...ags.splice(1));
+  }
+}
+
+const elxButtons = ref<ELXButtonProps[]>([
+  {
+    elxButtonType: 'clear'
+  },
+  {
+    elxButtonType: 'loading'
+  },
+  {
+    elxButtonType: 'send'
+  },
+  {
+    elxButtonType: 'speech'
+  },
+  {
+    elxButtonType: 'speechLoading'
+  }
+]);
+
+function handleClickEvent(evt: MouseEvent) {
+  logClick('@click 点击事件：', evt);
+}
+
+function handleSubmitEvent(evt: MouseEvent) {
+  logClick('@submit 点击事件：', evt);
+}
+
+function handleCancelEvent(evt: MouseEvent) {
+  logClick('@cancel 点击事件：', evt);
+}
+
+function handleClearEvent(evt: MouseEvent) {
+  logClick('@clear 点击事件：', evt);
+}
+</script>
+
+<template>
+  <div class="elxButton-wrapper">
+    <ELXButton
+      v-for="(item, index) in elxButtons"
+      :key="index"
+      v-bind="{ ...$attrs, ...item }"
+      @click="handleClickEvent"
+      @submit="handleSubmitEvent"
+      @cancel="handleCancelEvent"
+      @clear="handleClearEvent"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.elxButton-wrapper {
+  width: 100%;
+  height: 95vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>