From d0441f53cec010c975be373bc1d263da88e80abc Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Mon, 29 Jul 2024 14:13:55 -0400
Subject: [PATCH] update sl-select suffix example

---
 docs/pages/components/select.md | 34 +++++----------------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
index fe48c837..04184b05 100644
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -395,13 +395,14 @@ const App = () => (
 );
 ```
 
-### Prefix Icons
+### Prefix & Suffix
 
-Use the `prefix` slot to prepend an icon to the control.
+Use the `prefix` and `suffix` slots to add presentational icons and text. Avoid slotting in interactive elements, such as buttons, links, etc.
 
 ```html:preview
 <sl-select placeholder="Small" size="small" clearable>
   <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-badge slot="suffix">New</sl-badge>
   <sl-option value="option-1">Option 1</sl-option>
   <sl-option value="option-2">Option 2</sl-option>
   <sl-option value="option-3">Option 3</sl-option>
@@ -409,6 +410,7 @@ Use the `prefix` slot to prepend an icon to the control.
 <br />
 <sl-select placeholder="Medium" size="medium" clearable>
   <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-badge slot="suffix">New</sl-badge>
   <sl-option value="option-1">Option 1</sl-option>
   <sl-option value="option-2">Option 2</sl-option>
   <sl-option value="option-3">Option 3</sl-option>
@@ -416,33 +418,7 @@ Use the `prefix` slot to prepend an icon to the control.
 <br />
 <sl-select placeholder="Large" size="large" clearable>
   <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
-```
-
-### Suffix Icons
-
-Use the `suffix` slot to append an icon to the control.
-
-```html:preview
-<sl-select placeholder="Small" size="small" clearable>
-  <sl-icon name="house" slot="suffix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
-<br />
-<sl-select placeholder="Medium" size="medium" clearable>
-  <sl-icon name="house" slot="suffix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
-<br />
-<sl-select placeholder="Large" size="large" clearable>
-  <sl-icon name="house" slot="suffix"></sl-icon>
+  <sl-badge slot="suffix">New</sl-badge>
   <sl-option value="option-1">Option 1</sl-option>
   <sl-option value="option-2">Option 2</sl-option>
   <sl-option value="option-3">Option 3</sl-option>