diff --git a/.changeset/config.json b/.changeset/config.json
index 91b6a95..6cab42f 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@ariabones/playground"]
 }
diff --git a/.changeset/rotten-mice-walk.md b/.changeset/rotten-mice-walk.md
new file mode 100644
index 0000000..3f09486
--- /dev/null
+++ b/.changeset/rotten-mice-walk.md
@@ -0,0 +1,5 @@
+---
+"@ariabones/button": minor
+---
+
+accept default value through data-pressed attribute
diff --git a/apps/playground/index.html b/apps/playground/index.html
index 071263a..eb640dc 100644
--- a/apps/playground/index.html
+++ b/apps/playground/index.html
@@ -11,17 +11,13 @@
     <div id="root"></div>
     <script type="module" src="/src/main.ts"></script>
     <section style="display: grid; grid-template-columns: 1fr; row-gap: 8px">
-      <button
-        id="disable-button"
-        _="on click set @disabled to true"
-        is="ariabones-button"
-      >
+      <button is="ariabones-button" _="on click set @disabled to true">
         Disable button
       </button>
       <button
-        id="toggle-button"
-        _type="toggle"
         is="ariabones-button"
+        data-type="toggle"
+        data-pressed="true"
         style="display: flex; align-items: center; justify-content: center"
       >
         Toggle button
diff --git a/apps/playground/src/button.ts b/apps/playground/src/button.ts
deleted file mode 100644
index 6f42bd0..0000000
--- a/apps/playground/src/button.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// specification
-// https://www.w3.org/WAI/ARIA/apg/patterns/button/
-class Button extends HTMLButtonElement {
-  constructor() {
-    super()
-  }
-
-  static get observedAttributes(): string[] {
-    return ["disabled", "_type", "style"]
-  }
-
-  attributeChangedCallback(
-    name: string,
-    _oldValue: string | null,
-    newValue: string | null,
-  ): void {
-    // disabled
-    if (name === "disabled") {
-      if (newValue === "true") {
-        this.setAttribute("aria-disabled", "true")
-      } else {
-        this.removeAttribute("aria-disabled")
-      }
-    }
-    // menu
-
-    // toggle
-    if (name === "_type") {
-      if (newValue === "toggle") {
-        this.setAttribute("_", "on click if @aria-pressed equals 'false' set @aria-pressed to 'true' else set @aria-pressed to 'false'")
-        this.setAttribute("aria-pressed", "false")
-      }
-    }
-  }
-}
-
-export function registerButton(): void {
-  window.customElements.define("ariabones-button", Button, { extends: "button" })
-}
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
index c029927..8d821c4 100644
--- a/packages/button/src/index.ts
+++ b/packages/button/src/index.ts
@@ -6,7 +6,7 @@ class Button extends HTMLButtonElement {
   }
 
   static get observedAttributes(): string[] {
-    return ["disabled", "_type", "style"]
+    return ["disabled", "data-type"]
   }
 
   attributeChangedCallback(
@@ -22,11 +22,18 @@ class Button extends HTMLButtonElement {
         this.removeAttribute("aria-disabled")
       }
     }
-    if (name === "_type") {
+    if (name === "data-type") {
       // toggle
       if (newValue === "toggle") {
-        this.setAttribute("_", "on click if @aria-pressed equals 'false' set @aria-pressed to 'true' else set @aria-pressed to 'false'")
-        this.setAttribute("aria-pressed", "false")
+        const pressed = this.getAttribute("data-pressed")
+        this.setAttribute("aria-pressed", pressed ?? "false")
+        this.setAttribute("_", `
+        on click 
+          if @aria-pressed equals 'true' 
+            set @aria-pressed to 'false'
+          else 
+            set @aria-pressed to 'true'
+        `)
       }
 
       // menu