docs(button): update shape and icons playgrounds to showcase circular…

… icon buttons (#3594)
ionic-team · Apr 15, 2024 · 7d40ea8 · 7d40ea8
1 parent dce9de2
commit 7d40ea8
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 18 deletions.
diff --git a/static/usage/v8/button/icons/angular.md b/static/usage/v8/button/icons/angular.md
@@ -1,15 +1,43 @@
 ```html
+<ion-button size="small">
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
 <ion-button>
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
+<ion-button size="large">
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
+<ion-button size="small">
   <ion-icon slot="start" name="star"></ion-icon>
   Left Icon
 </ion-button>
 
 <ion-button>
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button size="large">
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button size="small">
   Right Icon
-  <ion-icon slot="end" name="star"></ion-icon>
+  <ion-icon slot="end" name="heart"></ion-icon>
 </ion-button>
 
 <ion-button>
-  <ion-icon slot="icon-only" name="star"></ion-icon>
+  Right Icon
+  <ion-icon slot="end" name="heart"></ion-icon>
+</ion-button>
+
+<ion-button size="large">
+  Right Icon
+  <ion-icon slot="end" name="heart"></ion-icon>
 </ion-button>
 ```
diff --git a/static/usage/v8/button/icons/demo.html b/static/usage/v8/button/icons/demo.html
@@ -8,24 +8,60 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+
+    <style>
+      .container {
+        display: grid;
+        grid-template-columns: repeat(3, auto);
+        justify-items: center;
+      }
+    </style>
   </head>
 
   <body>
     <ion-app>
       <ion-content>
         <div class="container">
+          <ion-button size="small">
+            <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+          </ion-button>
+
           <ion-button>
+            <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+          </ion-button>
+
+          <ion-button size="large">
+            <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+          </ion-button>
+
+          <ion-button size="small">
             <ion-icon slot="start" name="star"></ion-icon>
             Left Icon
           </ion-button>
 
           <ion-button>
+            <ion-icon slot="start" name="star"></ion-icon>
+            Left Icon
+          </ion-button>
+
+          <ion-button size="large">
+            <ion-icon slot="start" name="star"></ion-icon>
+            Left Icon
+          </ion-button>
+
+          <ion-button size="small">
             Right Icon
-            <ion-icon slot="end" name="star"></ion-icon>
+            <ion-icon slot="end" name="heart"></ion-icon>
           </ion-button>
 
           <ion-button>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
+            Right Icon
+            <ion-icon slot="end" name="heart"></ion-icon>
+          </ion-button>
+
+          <ion-button size="large">
+            Right Icon
+            <ion-icon slot="end" name="heart"></ion-icon>
           </ion-button>
         </div>
       </ion-content>

diff --git a/static/usage/v8/button/icons/javascript.md b/static/usage/v8/button/icons/javascript.md
@@ -1,15 +1,43 @@
 ```html
+<ion-button size="small">
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
 <ion-button>
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
+<ion-button size="large">
+  <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+</ion-button>
+
+<ion-button size="small">
   <ion-icon slot="start" name="star"></ion-icon>
   Left Icon
 </ion-button>
 
 <ion-button>
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button size="large">
+  <ion-icon slot="start" name="star"></ion-icon>
+  Left Icon
+</ion-button>
+
+<ion-button size="small">
   Right Icon
-  <ion-icon slot="end" name="star"></ion-icon>
+  <ion-icon slot="end" name="heart"></ion-icon>
 </ion-button>
 
 <ion-button>
-  <ion-icon slot="icon-only" name="star"></ion-icon>
+  Right Icon
+  <ion-icon slot="end" name="heart"></ion-icon>
+</ion-button>
+
+<ion-button size="large">
+  Right Icon
+  <ion-icon slot="end" name="heart"></ion-icon>
 </ion-button>
 ```
diff --git a/static/usage/v8/button/icons/react.md b/static/usage/v8/button/icons/react.md
@@ -1,23 +1,51 @@
 ```tsx
 import React from 'react';
 import { IonButton, IonIcon } from '@ionic/react';
-import { star } from 'ionicons/icons';
+import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
 
 function Example() {
   return (
     <>
+      <IonButton size="small">
+        <IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
+      </IonButton>
+
       <IonButton>
+        <IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
+      </IonButton>
+
+      <IonButton size="large">
+        <IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
+      </IonButton>
+
+      <IonButton size="small">
         <IonIcon slot="start" icon={star}></IonIcon>
         Left Icon
       </IonButton>
 
       <IonButton>
+        <IonIcon slot="start" icon={star}></IonIcon>
+        Left Icon
+      </IonButton>
+
+      <IonButton size="large">
+        <IonIcon slot="start" icon={star}></IonIcon>
+        Left Icon
+      </IonButton>
+
+      <IonButton size="small">
         Right Icon
-        <IonIcon slot="end" icon={star}></IonIcon>
+        <IonIcon slot="end" icon={heart}></IonIcon>
       </IonButton>
 
       <IonButton>
-        <IonIcon slot="icon-only" icon={star}></IonIcon>
+        Right Icon
+        <IonIcon slot="end" icon={heart}></IonIcon>
+      </IonButton>
+
+      <IonButton size="large">
+        Right Icon
+        <IonIcon slot="end" icon={heart}></IonIcon>
       </IonButton>
     </>
   );

diff --git a/static/usage/v8/button/icons/vue.md b/static/usage/v8/button/icons/vue.md
@@ -1,29 +1,57 @@
 ```html
 <template>
+  <ion-button size="small">
+    <ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
+  </ion-button>
+
   <ion-button>
+    <ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
+  </ion-button>
+
+  <ion-button size="large">
+    <ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
+  </ion-button>
+
+  <ion-button size="small">
     <ion-icon slot="start" :icon="star"></ion-icon>
     Left Icon
   </ion-button>
 
   <ion-button>
+    <ion-icon slot="start" :icon="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button size="large">
+    <ion-icon slot="start" :icon="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button size="small">
     Right Icon
-    <ion-icon slot="end" :icon="star"></ion-icon>
+    <ion-icon slot="end" :icon="heart"></ion-icon>
   </ion-button>
 
   <ion-button>
-    <ion-icon slot="icon-only" :icon="star"></ion-icon>
+    Right Icon
+    <ion-icon slot="end" :icon="heart"></ion-icon>
+  </ion-button>
+
+  <ion-button size="large">
+    Right Icon
+    <ion-icon slot="end" :icon="heart"></ion-icon>
   </ion-button>
 </template>
 
 <script lang="ts">
   import { IonButton, IonIcon } from '@ionic/vue';
   import { defineComponent } from 'vue';
-  import { star } from 'ionicons/icons';
+  import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
 
   export default defineComponent({
     components: { IonButton, IonIcon },
     setup() {
-      return { star };
+      return { heart, logoApple, settingsSharp, star };
     },
   });
 </script>

diff --git a/static/usage/v8/button/shape/angular.md b/static/usage/v8/button/shape/angular.md
@@ -1,3 +1,10 @@
 ```html
-<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
+<ion-button>Default</ion-button>
+<ion-button shape="round">Round</ion-button>
+<ion-button>
+  <ion-icon slot="icon-only" name="heart"></ion-icon>
+</ion-button>
+<ion-button shape="round">
+  <ion-icon slot="icon-only" name="heart"></ion-icon>
+</ion-button>
 ```
diff --git a/static/usage/v8/button/shape/demo.html b/static/usage/v8/button/shape/demo.html
@@ -16,6 +16,12 @@
         <div class="container">
           <ion-button>Default</ion-button>
           <ion-button shape="round">Round</ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="heart"></ion-icon>
+          </ion-button>
+          <ion-button shape="round">
+            <ion-icon slot="icon-only" name="heart"></ion-icon>
+          </ion-button>
         </div>
       </ion-content>
     </ion-app>

diff --git a/static/usage/v8/button/shape/javascript.md b/static/usage/v8/button/shape/javascript.md
@@ -1,3 +1,10 @@
 ```html
-<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
+<ion-button>Default</ion-button>
+<ion-button shape="round">Round</ion-button>
+<ion-button>
+  <ion-icon slot="icon-only" name="heart"></ion-icon>
+</ion-button>
+<ion-button shape="round">
+  <ion-icon slot="icon-only" name="heart"></ion-icon>
+</ion-button>
 ```
diff --git a/static/usage/v8/button/shape/react.md b/static/usage/v8/button/shape/react.md
@@ -1,12 +1,19 @@
 ```tsx
 import React from 'react';
-import { IonButton } from '@ionic/react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { heart } from 'ionicons/icons';
 
 function Example() {
   return (
     <>
       <IonButton>Default</IonButton>
       <IonButton shape="round">Round</IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" icon={heart}></IonIcon>
+      </IonButton>
+      <IonButton shape="round">
+        <IonIcon slot="icon-only" icon={heart}></IonIcon>
+      </IonButton>
     </>
   );
 }

diff --git a/static/usage/v8/button/shape/vue.md b/static/usage/v8/button/shape/vue.md
@@ -2,14 +2,24 @@
 <template>
   <ion-button>Default</ion-button>
   <ion-button shape="round">Round</ion-button>
+  <ion-button>
+    <ion-icon slot="icon-only" :icon="heart"></ion-icon>
+  </ion-button>
+  <ion-button shape="round">
+    <ion-icon slot="icon-only" :icon="heart"></ion-icon>
+  </ion-button>
 </template>
 
 <script lang="ts">
-  import { IonButton } from '@ionic/vue';
+  import { IonButton, IonIcon } from '@ionic/vue';
   import { defineComponent } from 'vue';
+  import { heart } from 'ionicons/icons';
 
   export default defineComponent({
-    components: { IonButton },
+    components: { IonButton, IonIcon },
+    setup() {
+      return { heart };
+    },
   });
 </script>
 ```