diff --git a/docs/components/button.md b/docs/components/button.md
index 3c065f7a..3b528fe8 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -180,4 +180,48 @@ Use the `disabled` prop to disable a button. Clicks will be suppressed until the
Danger
```
+### Styling Buttons
+
+This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's type attribute instead of a class (e.g. `sl-button[type="primary"]`).
+
+```html preview
+Pink Button
+
+
+```
+
[component-metadata:sl-button]