feat: add shape props for button to create rounded buttons

hperrin · Nov 9, 2019 · 7fb3b8b · 7fb3b8b
1 parent 5af26c3
commit 7fb3b8b
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 61 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -19,6 +19,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@material/rtl": "^4.0.0",
     "compression": "^1.7.4",
     "polka": "next",
     "sirv": "^0.4.2"

diff --git a/site/src/routes/demo/button.svelte b/site/src/routes/demo/button.svelte
@@ -38,6 +38,14 @@
     <Button color="secondary" on:click={() => clicked++}><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
   </div>
 
+  <div>  
+    Shaped button: <br />
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Label>Unelevated</Label></Button>
+    <Button on:click={() => clicked++} variant="outlined" shape="rounded"><Label>Outlined</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Icon class="material-icons">favorite</Icon><Label>Icon</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
+  </div>
+
   <div>
     Button groups: <br />
     <Group>