From 1546b53d40ffa77ed4e5ed667f32152f1ad544cd Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 15 Sep 2020 08:16:16 -0400
Subject: [PATCH] Add color example

---
 docs/components/icon-button.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 9eed9fdba..9c1dc510a 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -24,6 +24,33 @@ Icon buttons inherit their parent element's `font-size`.
 <sl-icon-button name="pencil" style="font-size: 2.5rem;"></sl-icon-button>
 ```
 
+### Colors
+
+Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
+
+```html preview
+<div class="icon-button-color">
+  <sl-icon-button name="type-bold"></sl-icon-button>
+  <sl-icon-button name="type-italic"></sl-icon-button>
+  <sl-icon-button name="type-underline"></sl-icon-button>
+</div>
+
+<style>
+  .icon-button-color sl-icon-button::part(base) {
+    color: #b00091;
+  }
+  
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
+    color: #c913aa;
+  }
+
+  .icon-button-color sl-icon-button::part(base):active {
+    color: #960077;
+  }
+</style>
+```
+
 ### Icon Button with Tooltip
 
 Wrap a tooltip around an icon button to provide contextual information to the user.