diff --git a/devui/status/__tests__/status.spec.ts b/devui/status/__tests__/status.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bd4546d5e93c23e5a64f5db25fbec766a41d51e
--- /dev/null
+++ b/devui/status/__tests__/status.spec.ts
@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import Status from '../status';
+
+describe('d-status', () => {
+  it('type', async () => {
+    const wrapper = mount(Status, {
+      props: { type: 'success' }
+    });
+    
+    expect(wrapper.classes()).toContain('devui-status-bg-success');
+
+    await wrapper.setProps({ type: 'error' });
+
+    expect(wrapper.classes()).toContain('devui-status-bg-error');
+
+    await wrapper.setProps({ type: 'warning' });
+
+    expect(wrapper.classes()).toContain('devui-status-bg-warning');
+
+    await wrapper.setProps({type: 'initial'});
+    
+    expect(wrapper.classes()).toContain('devui-status-bg-initial');
+
+    await wrapper.setProps({type: 'waiting'});
+
+    expect(wrapper.classes()).toContain('devui-status-bg-waiting');
+
+    await wrapper.setProps({type: 'running'});
+
+    expect(wrapper.classes()).toContain('devui-status-bg-running');
+
+    await wrapper.setProps({type: 'invalid'});
+    
+    expect(wrapper.classes()).toContain('devui-status-bg-invalid');
+  });
+
+  it('slot', () => {
+    const statusText = 'vue3 devui';
+    const wrapper = mount(Status, {
+      slots: {
+        default: statusText
+      }
+    });
+    expect(wrapper.text()).toEqual(statusText);
+  });
+});
diff --git a/devui/status/demo/code/status-code.tsx b/devui/status/demo/code/status-code.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..00384b10808fbba8293bbdb6ce8f4dbd0f5d76c9
--- /dev/null
+++ b/devui/status/demo/code/status-code.tsx
@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue';
+import Status from '../../status';
+
+export default defineComponent({
+  name: 'DStatusCode',
+  setup() {
+    return () => {
+      return (
+        <section>
+            <Status type="success">success</Status>
+            <Status type="error">error</Status>
+            <Status type="warning">warning</Status>
+            <Status type="initial">initial</Status>
+            <Status type="waiting">waiting</Status>
+            <Status type="running">running</Status>
+            <Status type="invalid">invalid</Status>
+        </section>
+      );
+    }
+  }
+});
\ No newline at end of file
diff --git a/devui/status/demo/status-demo.tsx b/devui/status/demo/status-demo.tsx
index 63003ea6f5eebe421ff3627d10f3a956b4e4c055..5cf904d2c51496e284157923afa82db26c6be9d4 100644
--- a/devui/status/demo/status-demo.tsx
+++ b/devui/status/demo/status-demo.tsx
@@ -1,12 +1,21 @@
-import { defineComponent } from 'vue'
-
+import { defineComponent } from 'vue';
+import CodeBox from '../../shared/devui-codebox/devui-codebox';
+import Status from './code/status-code';
+import StatusCode from './code/status-code.tsx?raw';
 export default defineComponent({
-  name: 'd-status-demo',
-  props: {
-  },
-  setup(props, ctx) {
+  name: 'DStatusDemo',
+  setup() {
+    const StatusSource: any[] = [{title: 'TSX', language: 'TSX', code: StatusCode}];
     return () => {
-      return <div>devui-status-demo</div>
+      return <div class="demo-container">
+      <div class="demo-example">
+        <div class="demo-title">{ '基本用法' }</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-button-primary" sourceData={StatusSource}>
+            <Status></Status>
+        </CodeBox>
+      </div>
+    </div>
     }
   }
 })
\ No newline at end of file
diff --git a/devui/status/demo/status.route.ts b/devui/status/demo/status.route.ts
index adb8b979c4c12301466c2a845a539f451589efd5..a5a70083816eb15e59e631ace38dec786cd93452 100644
--- a/devui/status/demo/status.route.ts
+++ b/devui/status/demo/status.route.ts
@@ -1,8 +1,8 @@
-import StatusDemoComponent from './status-demo'
-import DevUIApiComponent from '../../shared/devui-api/devui-api'
+import StatusDemoComponent from './status-demo';
+import DevUIApiComponent from '../../shared/devui-api/devui-api';
 
-import ApiCn from '../doc/api-cn.md'
-import ApiEn from '../doc/api-en.md'
+import ApiCn from '../doc/api-cn.md';
+import ApiEn from '../doc/api-en.md';
 const routes = [
   { path: '',  redirectTo: 'demo' },
   { path: 'demo', component: StatusDemoComponent},
diff --git a/devui/status/doc/api-cn.md b/devui/status/doc/api-cn.md
index ab04ceb48c7190ca6d4b872d3c63df81268d7f3b..285635fa91f9bdfe520a051166e75e7081de06dc 100644
--- a/devui/status/doc/api-cn.md
+++ b/devui/status/doc/api-cn.md
@@ -13,4 +13,4 @@ import { StatusModule } from 'ng-devui/status';
 
 | 参数 |   类型   |   默认    | 说明                                                                         | 跳转 Demo                                   |
 | :--: | :------: | :-------: | :--------------------------------------------------------------------------- | ------------------------------------------- |
-| type | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | 必选，类型，值有 success、error、warning、initial、waiting、running、invalid | [基本用法](demo#basic-usage) |
+| type | `success\|error\|warning\|initial\|running\|invalid` | 'invalid' | 必选，类型，值有 success、error、warning、initial、waiting、running、invalid | [基本用法](demo#basic-usage) |
diff --git a/devui/status/doc/api-en.md b/devui/status/doc/api-en.md
index 38090811bdf16a06fbb29a46a44c695980fe74be..ec6128c39f286c1b930642cb927942f79cd0f48d 100644
--- a/devui/status/doc/api-en.md
+++ b/devui/status/doc/api-en.md
@@ -15,4 +15,4 @@ On the page
 
 | Parameter |                             Type                              |  Default  | Description                                                                                | Jump to Demo                                             |
 | :-------: | :-----------------------------------------------------------: | :-------: | :----------------------------------------------------------------------------------------- | -------------------------------------------------------- |
-|   type    | `invalid\|running\|waiting\|important\|less-important\|error` | 'invalid' | Required. The value can be success, error, warning, initial, waiting, running, or invalid. | [Basic usage](demo#basic-usage) |
+|   type    | `success\|error\|warning\|initial\|running\|invalid`  | 'invalid' | Required. The value can be success、error、warning、initial、waiting、running, or invalid. | [Basic usage](demo#basic-usage) |
diff --git a/devui/status/status.scss b/devui/status/status.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b0ed270ec4f2942cfe30b7b7b5b5813f1a40ca8
--- /dev/null
+++ b/devui/status/status.scss
@@ -0,0 +1,65 @@
+@import '../style/mixins/index';
+@import '../style/theme/color';
+@import '../style/theme/variables';
+@import '../style/theme/font';
+@import '../style/theme/corner';
+
+.devui-status {
+  line-height: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+
+  &::before {
+    display: inline-block;
+    content: '';
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+    border-radius: 100%;
+  }
+}
+
+.devui-status.devui-status-bg {
+  &-success {
+    &::before {
+      background-color: $devui-success;
+    }
+  }
+
+  &-error {
+    &::before {
+      background-color: $devui-danger;
+    }
+  }
+
+  &-warning {
+    &::before {
+      background-color: $devui-warning;
+    }
+  }
+
+  &-initial {
+    &::before {
+      background-color: $devui-initial;
+    }
+  }
+
+  &-waiting {
+    &::before {
+      background-color: $devui-waiting;
+    }
+  }
+
+  &-running {
+    &::before {
+      background-color: $devui-info;
+    }
+  }
+
+  &-invalid {
+    &::before {
+      background-color: $devui-dividing-line;
+    }
+  }
+}
diff --git a/devui/status/status.tsx b/devui/status/status.tsx
index 3252bd0e6c0a809a786c62eecf5237ab7f65ca8a..842e680e2027764e25dfa54c07e3ca49aa0ba78b 100644
--- a/devui/status/status.tsx
+++ b/devui/status/status.tsx
@@ -1,12 +1,30 @@
-import { defineComponent } from 'vue'
+
+import { defineComponent, computed } from 'vue';
+import './status.scss';
+export type IStatusType = 'success' | 'error' | 'initial' | 'warning' | 'waiting' | 'running' | 'invalid';
 
 export default defineComponent({
-  name: 'd-status',
+  name: 'DStatus',
   props: {
+    type:{
+      default: 'invalid',
+      type: String as () => IStatusType
+    }
   },
   setup(props, ctx) {
+    const typeClass = computed(() => {
+      const { type } = props;
+      const typeStatus = ['success' , 'error' , 'initial' , 'warning' , 'waiting' , 'running' , 'invalid'];
+      let typeClassStr = `devui-status devui-status-bg-invalid`;
+      if(typeStatus.includes(type)){
+        typeClassStr = `devui-status devui-status-bg-${type}`;
+      }
+      return typeClassStr;
+    });
     return () => {
-      return <div>devui-status</div>
+      return  <span class={typeClass.value}>
+                  {ctx.slots.default?.()}
+              </span>
     }
   }
 })
\ No newline at end of file