@czi-sds/mcp 0.5.2 → 0.5.3

package/data/zeroheight-exports/Buttons.md

@@ -13,6 +13,18 @@ Buttons are one of the primary ways users interact with and provide input to the
 
 Use the links below to jump to information on a specific Button variant:
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**ButtonIcon**
+
+---
+
 ---
 
 ## Square Button
@@ -29,6 +41,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 ### Small Primary Square Button
 
 Use for actions that are lower importance or don't require as much emphasis on the page such as actions taken in the page footer.
@@ -38,6 +66,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 ### Secondary Square Button
 
 Use for a secondary action, or deemphasized Button. Often paired with primary Button.
@@ -49,12 +93,32 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 ---
 
 ### Square Button Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Square Button spacing**
+
+---
+
 ---
 
 ## Copy Button
@@ -69,6 +133,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 ---
 
 ### Copy Button Spacing
@@ -77,6 +157,10 @@ These rules establish how much margin should exist between and around elements.
 
 
 
+**Copy Button spacing**
+
+---
+
 ---
 
 ## Icon Button
@@ -95,6 +179,18 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
 ### Medium Icon Button
 
 The Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon).
@@ -106,6 +202,18 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
 ### Small Icon Button
 
 The Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon).
@@ -117,6 +225,18 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
 ---
 
 ### Icon Button Spacing
@@ -125,6 +245,10 @@ These rules establish how much margin should exist between and around elements.
 
 
 
+**Icon Button spacing**
+
+---
+
 ## Code
 
 ## Button Components
@@ -161,6 +285,30 @@ Buttons are one of the primary ways users interact with and provide input to the
 
 Use the links below to jump to information on a specific Button variant:
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
 ---
 
 ## Rounded Button
@@ -179,9 +327,41 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 | **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
 | ------------------ | --------- | ----------- | ------------ |
 
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
 
 
 
@@ -197,41 +377,46 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**Button**
 
+---
 
+**Button**
 
-### Error Rounded Button
+---
 
-Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+---
 
 | **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
 | ------------------ | --------- | ----------- | ------------ |
 
+**Button**
+
 ---
 
-### Rounded Button Spacing
+**Button**
 
-These rules establish how much margin should exist between and around elements.
+---
+
+**Button**
 
 ---
 
-## Square Button
+**Button**
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
+---
 
-### Primary Square Button
 
-Used to complete primary actions within Forms and Dropdown Menus; paired with Text Inputs.
+
+### Error Rounded Button
+
+Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
 
 Include an icon when needing to provide additional context to users of what action the Button has.
 
@@ -240,55 +425,61 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**Button**
 
-### Secondary Square Button
+---
 
-Used to complete secondary actions within Forms and Dropdown Menus; paired with Text Inputs.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+---
+
+**Button**
+
+---
 
 | **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
 | ------------------ | --------- | ----------- | ------------ |
 
-### Error Square Button
+**Button**
 
-Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
+---
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+**Button**
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+---
+
+**Button**
 
 ---
 
-### Square Button Spacing
+---
+
+### Rounded Button Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Rounded Button Spacing**
+
 ---
 
-## Minimal Button
+---
+
+## Square Button
 
 |     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
 | --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
-### Primary Minimal Button
-
-Text Buttons initiate actions that keep the user on the same page, such as opening or closing dialog windows or overlays. They should contain a maximum of 2-3 words.
+### Primary Square Button
 
-If a longer or inline call to action with a similar visual style is needed, a Text Link might be more appropriate. In addition to containing more words, Text Links navigate the user away from their current page to a new one, whereas Minimal Buttons keep users on the same page.
+Used to complete primary actions within Forms and Dropdown Menus; paired with Text Inputs.
 
 Include an icon when needing to provide additional context to users of what action the Button has.
 
@@ -297,88 +488,400 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-
-
-### Secondary Minimal Button
+**Button**
 
-Use for a deemphasized action or when paired with a Primary Minimal Button.
+---
 
-Note: only Primary Minimal Buttons can be paired with icons.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+**Button**
 
 ---
 
-### Minimal Button Spacing
-
-These rules establish how much margin should exist between and around elements.
+**Button**
 
 ---
 
-## Icon Button
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
+**Button**
 
-### Large Primary Icon Button
+---
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+**Button**
 
-The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
+---
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default (Off)** | **Hover (Off)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ----------- | ---------------- | -------------- | ------------ |
+**Button**
 
-### Small Primary Icon Button
+---
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+### Secondary Square Button
 
-The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
+Used to complete secondary actions within Forms and Dropdown Menus; paired with Text Inputs.
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+Include an icon when needing to provide additional context to users of what action the Button has.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-### Large Secondary Icon Button
+**Button**
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+---
 
-The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+**Button**
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+---
 
-### Small Secondary Icon Button
+**Button**
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+---
 
-The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+### Error Square Button
+
+Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
+
+Include an icon when needing to provide additional context to users of what action the Button has.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+---
+
+### Square Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Square Button Spacing**
+
+---
+
+---
+
+## Minimal Button
+
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
+
+### Primary Minimal Button
+
+Text Buttons initiate actions that keep the user on the same page, such as opening or closing dialog windows or overlays. They should contain a maximum of 2-3 words.
+
+If a longer or inline call to action with a similar visual style is needed, a Text Link might be more appropriate. In addition to containing more words, Text Links navigate the user away from their current page to a new one, whereas Minimal Buttons keep users on the same page.
+
+Include an icon when needing to provide additional context to users of what action the Button has.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+
+
+### Secondary Minimal Button
+
+Use for a deemphasized action or when paired with a Primary Minimal Button.
+
+Note: only Primary Minimal Buttons can be paired with icons.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+**Button**
+
+---
+
+---
+
+### Minimal Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Text Button Spacing**
+
+---
+
+---
+
+## Icon Button
+
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
+
+### Large Primary Icon Button
+
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+
+The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
 
 Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+| **Default (Off)** | **Hover (Off)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ----------- | ---------------- | -------------- | ------------ |
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+### Small Primary Icon Button
+
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+
+The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
+
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+### Large Secondary Icon Button
+
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+
+The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+### Small Secondary Icon Button
+
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+
+The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+### Large Tertiary Icon Button
+
+The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
+
+Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Pressed** |
+| ----------- | --------- | ----------- |
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
 
-### Large Tertiary Icon Button
+### Medium Tertiary Icon Button
 
 The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
 
@@ -389,16 +892,17 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
-### Medium Tertiary Icon Button
+**ButtonIcon**
 
-The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
+---
 
-Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
+**ButtonIcon**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Pressed** |
-| ----------- | --------- | ----------- |
+**ButtonIcon**
+
+---
 
 ### Small Tertiary Icon Button
 
@@ -411,12 +915,28 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** |
 | ----------- | --------- | ----------- |
 
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
+**ButtonIcon**
+
+---
+
 ---
 
 ### Icon Button Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Icon Button Spacing**
+
+---
+
 ---
 
 ## Rounded Dropdown Button
@@ -437,6 +957,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
 
 
 ### Secondary Rounded Dropdown Button
@@ -450,12 +986,32 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
 ---
 
 ### Rounded Dropdown Button Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Rounded Dropdown Button Spacing**
+
+---
+
 ---
 
 
@@ -478,6 +1034,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
 ### Secondary Square Dropdown Button
 
 Use when there is a need to present the user with multiple options for actions that can be performed using a Button (generally in a similar context as icon Buttons).
@@ -491,12 +1063,32 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
+**ButtonDropdown**
+
+---
+
 ---
 
 ### Square Dropdown Button Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Square Dropdown Button Spacing**
+
+---
+
 ## Code
 
 ## Button Components
@@ -539,73 +1131,36 @@ Buttons are one of the primary ways users interact with and provide input to the
 
 Use the links below to jump to information on a specific Button variant:
 
----
-
-## Rounded Button
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
-
-### Primary Rounded Button
-
-General use for a primary or emphasized action.
-
-Include an icon when needing to provide additional context to users of what action the Button has.
-
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
-
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-
-
-### Secondary Rounded Button
-
-Use for a secondary action, or deemphasized Button. Often paired with primary Button.
-
-Include an icon when needing to provide additional context to users of what action the Button has.
-
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
-
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**Button**
 
-### Error Rounded Button
+---
 
-Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+---
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**ButtonIcon**
 
 ---
 
-### Rounded Button Spacing
+**ButtonDropdown**
 
-These rules establish how much margin should exist between and around elements.
+---
 
 ---
 
-## Square Button
+## Rounded Button
 
 |     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
 | --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-### Primary Square Button
+### Primary Rounded Button
 
-Used to complete primary actions within Forms and Dropdown Menus; paired with Text Inputs.
+General use for a primary or emphasized action.
 
 Include an icon when needing to provide additional context to users of what action the Button has.
 
@@ -614,55 +1169,46 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**Button**
 
-### Secondary Square Button
+---
 
-Used to complete secondary actions within Forms and Dropdown Menus; paired with Text Inputs.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+---
+
+**Button**
+
+---
 
 | **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
 | ------------------ | --------- | ----------- | ------------ |
 
-### Error Square Button
-
-Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+---
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
+**Button**
 
 ---
 
-### Square Button Spacing
-
-These rules establish how much margin should exist between and around elements.
+**Button**
 
 ---
 
-## Minimal Button
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-### Primary Minimal Button
 
-Text Buttons initiate actions that keep the user on the same page, such as opening or closing dialog windows or overlays. They should contain a maximum of 2-3 words.
+### Secondary Rounded Button
 
-If a longer or inline call to action with a similar visual style is needed, a Text Link might be more appropriate. In addition to containing more words, Text Links navigate the user away from their current page to a new one, whereas Minimal Buttons keep users on the same page.
+Use for a secondary action, or deemphasized Button. Often paired with primary Button.
 
 Include an icon when needing to provide additional context to users of what action the Button has.
 
@@ -671,1635 +1217,664 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-
-
-### Secondary Minimal Button
-
-Use for a deemphasized action or when paired with a Primary Minimal Button
-
-Note: only Primary Minimal Buttons can be paired with icons.
-
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
-
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+**Button**
 
+---
 
+**Button**
 
 ---
 
-### Minimal Button Spacing
-
-These rules establish how much margin should exist between and around elements.
+**Button**
 
 ---
 
-## Icon Button
+**Button**
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+---
 
-### Large Primary Icon Button
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+**Button**
 
-The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
+---
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default (Off)** | **Hover (Off)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ----------- | ---------------- | -------------- | ------------ |
+**Button**
 
+---
 
+**Button**
 
-### Small Primary Icon Button
+---
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+### Error Rounded Button
 
-The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
+Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+Include an icon when needing to provide additional context to users of what action the Button has.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
-### Large Secondary Icon Button
+**Button**
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+---
 
-The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+**Button**
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+---
 
-### Small Secondary Icon Button
+**Button**
 
-Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
+---
 
-The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
-| ----------------- | --------------- | ---------------- | -------------- | ------------ |
+**Button**
 
-### Large Tertiary Icon Button
+---
 
-The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
+**Button**
 
-Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+**Button**
 
-| **Default** | **Hover** | **Pressed** |
-| ----------- | --------- | ----------- |
+---
 
-### Medium Tertiary Icon Button
+---
 
-The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
+### Rounded Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Rounded Button Spacing**
+
+---
 
-Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
+---
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+## Square Button
 
-| **Default** | **Hover** | **Pressed** |
-| ----------- | --------- | ----------- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-### Small Tertiary Icon Button
+### Primary Square Button
 
-The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
+Used to complete primary actions within Forms and Dropdown Menus; paired with Text Inputs.
 
-Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
+Include an icon when needing to provide additional context to users of what action the Button has.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-| **Default** | **Hover** | **Pressed** |
-| ----------- | --------- | ----------- |
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**Button**
 
 ---
 
-### Icon Button Spacing
+**Button**
 
-These rules establish how much margin should exist between and around elements.
+---
+
+**Button**
 
 ---
 
-## Rounded Dropdown Button
+**Button**
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+---
 
-### Primary Rounded Dropdown Button
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Use when there is a need to present the user with multiple options for actions that can be performed using a Button (generally in a similar context as Icon Buttons).
+**Button**
 
-The Primary Rounded Dropdown Button should be used in places that require the user's primary attention or to emphasize a primary action.
+---
 
-The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
+**Button**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Pressed** | **Disabled** |
-| ----------- | --------- | ----------- | ------------ |
+**Button**
 
+---
 
+**Button**
 
-### Secondary Rounded Dropdown Button
+---
 
-Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
+### Secondary Square Button
 
-The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
+Used to complete secondary actions within Forms and Dropdown Menus; paired with Text Inputs.
+
+Include an icon when needing to provide additional context to users of what action the Button has.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Pressed** | **Disabled** |
 | ----------- | --------- | ----------- | ------------ |
 
+**Button**
+
 ---
 
-### Rounded Dropdown Button Spacing
+**Button**
 
-These rules establish how much margin should exist between and around elements.
+---
 
-## Code
+**Button**
 
-## Button Components
+---
 
-| Below you will find interactive Storybook iframes for each component within the Button element group. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Button ButtonIcon ButtonDropdown |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------- |
+**Button**
 
 ---
 
-### Button
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Storybook
+**Button**
 
 ---
 
-### ButtonIcon
-
-Storybook
+**Button**
 
 ---
 
-### ButtonDropdown
+**Button**
 
-Storybook
+---
+
+**Button**
 
 ---
 
-Buttons are one of the primary ways users interact with and provide input to the product's UI, serving as the main elements to solicit user action.
+### Error Square Button
 
-## Guidelines
+Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
 
-## Button Components
+Include an icon when needing to provide additional context to users of what action the Button has.
 
-| There are a range of Button types available to use depending on the amount of emphasis the Button needs to have, its location in the UI, and whether it is existing alone or alongside other Buttons. |     | **Jump to variant:** Button Dropdown Button Toggle Button |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------------------------------------- |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-### Visual Preview
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
+
+**Button**
 
 ---
 
-## Button
+**Button**
+
+---
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
+**Button**
 
-### Button Styles
+---
 
-All of the available Button styles are shown below, demonstrated here using the primary type.
+**Button**
 
 ---
 
-### Live Instance
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+**Button**
+
+---
 
-Default
+**Button**
 
 ---
 
-### Button – Rounded
+**Button**
 
-Use Button – Rounded as part of top-level or primary application navigation.
+---
 
-#### Primary
+**Button**
 
-Use for primary or emphasized actions.
+---
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
+---
 
-_Title Case_
+### Square Button Spacing
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+These rules establish how much margin should exist between and around elements.
 
-_All Caps_
+**Square Button Spacing**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-#### Secondary
+---
 
-Use for a secondary or deemphasized action; often paired with a primary Button.
+## Minimal Button
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-_Title Case_
+### Primary Minimal Button
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Text Buttons initiate actions that keep the user on the same page, such as opening or closing dialog windows or overlays. They should contain a maximum of 2-3 words.
 
-_All Caps_
+If a longer or inline call to action with a similar visual style is needed, a Text Link might be more appropriate. In addition to containing more words, Text Links navigate the user away from their current page to a new one, whereas Minimal Buttons keep users on the same page.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Include an icon when needing to provide additional context to users of what action the Button has.
 
-#### Destructive
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-Use the destructive Button when the outcome of the user clicking the button will result in something being removed or deleted.
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
+**Button**
 
-_Title Case_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**Button**
 
-_All Caps_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**Button**
 
 ---
 
-### Button – Square
+**Button**
 
-Use Button – Square in the body or main content area of applications.
+---
 
-#### **Primary**
+| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
+| ------------------ | --------- | ----------- | ------------ |
 
-Alternate Button style for primary or emphasized actions.
+**Button**
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
+---
 
-_Title Case_
+**Button**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-_All Caps_
+**Button**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-#### **Secondary**
+**Button**
 
-Use for a secondary or deemphasized action; often paired with a primary Button.
+---
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
 
-_Title Case_
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+### Secondary Minimal Button
 
-_All Caps_
+Use for a deemphasized action or when paired with a Primary Minimal Button
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Note: only Primary Minimal Buttons can be paired with icons.
 
-#### Destructive
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-Use the destructive Button when the outcome of the user clicking the button will result in something being removed or deleted.
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; title case used by default.
+**Button**
 
-_Title Case_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**Button**
 
-_All Caps_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**Button**
 
 ---
 
-### Button – Minimal
+**Button**
 
-Minimal Buttons initiate actions that keep the user on the same page, such as opening or closing Dialogs. They should contain a maximum of 2-3 words.
+---
 
-If a longer or inline call to action with a similar visual style is needed, a Link might be more appropriate. In addition to containing more words, Text Links navigate the user away from their current page to a new one, whereas Minimal Buttons keep users on the same page.
 
-#### Primary
 
-Use for primary or emphasized actions.
+---
 
-Include an icon when needing to provide additional context to users of what action the Button has. Label text is available in all caps or title case; all caps is used by default.
+### Minimal Button Spacing
 
-_Title Case_
+These rules establish how much margin should exist between and around elements.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**Minimal Button Spacing**
 
-_All Caps_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-#### Secondary
+## Icon Button
 
-Use for a secondary or deemphasized action; often paired with a primary Button.
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-Label text is available in all caps or title case; all caps is used by default.
+### Large Primary Icon Button
 
-_Title Case_
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
 
-_All Caps_
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
----
+| **Default (Off)** | **Hover (Off)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ----------- | ---------------- | -------------- | ------------ |
 
-### Button – Icon
+**ButtonIcon**
 
-Use when a standard Button doesn't seem necessary or won't fit such as when used as part of complex components like Tables. Button – Icon should generally be coupled with a Tooltip that is displayed on hover to provide a label indicating the Button's functionality.
+---
 
-Optionally, pair Button – Icon with a Tooltip to use as a label to communicate the button's functionality.
+**ButtonIcon**
 
-#### Primary
+---
 
-Primary Button – Icon should be used in places that require the user's primary attention or to emphasize a primary action. Can be paired with other Button components.
+**ButtonIcon**
 
-_Large_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
-_Medium_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
-_Small_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
-#### Secondary
+---
 
-Secondary Button – Icon should be used for deemphasized or secondary actions. Can be paired with other Button components.
 
-_Large_
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+### Small Primary Icon Button
 
-_Medium_
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+The Primary Icon Button should be used in places that require the user's primary attention or to emphasize a primary action.
 
-_Small_
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-#### Tertiary
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
 
-The tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion. It is not usually used in combination with other Buttons or Tooltips.
+**ButtonIcon**
 
-_Large_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
-_Medium_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
-_Small_
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
 ---
 
-### Button Spacing
+### Large Secondary Icon Button
 
-These rules establish how much margin should exist between and around elements.
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
 
----
+The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
 
-## Dropdown Button
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-### Dropdown Button Styles
+| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ---------------- | -------------- | ------------ |
 
-All of the available Dropdown Button styles are shown below, demonstrated here using the primary type.
+**ButtonIcon**
 
 ---
 
-### Live Instance
+**ButtonIcon**
 
-Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+---
 
-Default
+**ButtonIcon**
 
 ---
 
-### Dropdown Button – Rounded
+**ButtonIcon**
 
-Use when there is a need to present the user with multiple options for actions that can be performed using a Button; the options are presented in a Dropdown Menu.
+---
 
-#### Primary
+**ButtonIcon**
 
-The Primary variant should be used in places that require the user's primary attention or to emphasize a primary action.
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+### Small Secondary Icon Button
 
-#### Secondary
+Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
 
-The Secondary Rounded Dropdown Button should be used for deemphasized or secondary actions.
+The Secondary Icon Button should be used for deemphasized or secondary actions; often paired with the Primary Icon Button.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Icon Buttons can be coupled with a Dropdown Menu when there are multiple options available to the user upon triggering the Button.
 
----
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-### Dropdown Button – Square
+| **Default (Off)** | **Hover (Off)** | **Default (On)** | **Hover (On)** | **Disabled** |
+| ----------------- | --------------- | ---------------- | -------------- | ------------ |
 
-Alternate Dropdown Button style for use when there is a need to present the user with multiple options for actions that can be performed using a Button; the options are presented in a Dropdown Menu.
+**ButtonIcon**
 
-#### Primary
+---
 
-The Primary variant should be used in places that require the user's primary attention or to emphasize a primary action.
+**ButtonIcon**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-#### Secondary
+**ButtonIcon**
 
-The Secondary Rounded Dropdown Button should be used for deemphasized or secondary actions.
+---
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
 ---
 
-### Dropdown Button – Icon
+**ButtonIcon**
 
-Use when there is a need to present the user with multiple options for actions that can be performed and a standard Dropdown Button doesn't seem necessary or won't fit such as when used as part of complex components like Tables; the options are presented in a Dropdown Menu. Dropdown Buttons should generally be coupled with a Tooltip that is displayed on hover to provide a label indicating the Button's functionality.
+---
 
-Optionally, pair Dropdown Button – Icon with a Tooltip to use as a label to communicate the button's functionality.
+### Large Tertiary Icon Button
 
-#### Primary
+The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
 
-Primary Dropdown Button – Icon should be used in places that require the user's primary attention or to emphasize a primary action. Can be paired with other Button components.
+Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
 
-_Large_
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+| **Default** | **Hover** | **Pressed** |
+| ----------- | --------- | ----------- |
 
-_Medium_
+**ButtonIcon**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-_Small_
+**ButtonIcon**
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+---
 
-#### Secondary
+**ButtonIcon**
 
-Secondary Dropdown Button – Icon should be used for deemphasized or secondary actions. Can be paired with other Button components.
+---
 
-_Large_
+### Medium Tertiary Icon Button
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
 
-_Medium_
+Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-_Small_
+| **Default** | **Hover** | **Pressed** |
+| ----------- | --------- | ----------- |
 
-| Default | Hover | Pressed | Disabled |
-| ------- | ----- | ------- | -------- |
+**ButtonIcon**
 
 ---
 
-### Dropdown Button Spacing
+**ButtonIcon**
 
-These rules establish how much margin should exist between and around elements.
+---
+
+**ButtonIcon**
 
 ---
 
-## Toggle Button
+### Small Tertiary Icon Button
+
+The Tertiary Icon Button should be used for lowest level actions that are not a part of the user's main workflow, such as closing a Dialog or expanding an Accordion (documentation coming soon). It is not usually paired with other Icon Buttons.
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
+Use the Tertiary Icon Button size that is most appropriate for the design it is being used in.
 
-### Live Instance
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+| **Default** | **Hover** | **Pressed** |
+| ----------- | --------- | ----------- |
 
-Default
+**ButtonIcon**
 
 ---
 
-### Overview
+**ButtonIcon**
 
-Use Toggle Button when there is a need to enable or disable an element in the UI (such as toggling visibility of a Panel). If users need to indicate true or false as part of a form or flip a setting or option from off to on (and vise versa), use Toggle Input.
+---
 
-Optionally, pair Toggle Button with a Tooltip to use as a label to communicate the button's functionality.
+**ButtonIcon**
 
-#### Primary
+---
 
-Toggle Button – Primary should be used in places that require the user's primary attention or to emphasize a primary action. Can be paired with other Button components.
+---
 
-_Large_
+### Icon Button Spacing
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+These rules establish how much margin should exist between and around elements.
 
-_Medium_
+**Icon Button_Large Spacing**
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+---
 
-_Small_
+---
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+## Rounded Dropdown Button
 
-#### Secondary
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-Toggle Button – Secondary should be used for deemphasized or secondary actions. Can be paired with other Button components.
+### Primary Rounded Dropdown Button
 
-_Large_
+Use when there is a need to present the user with multiple options for actions that can be performed using a Button (generally in a similar context as Icon Buttons).
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+The Primary Rounded Dropdown Button should be used in places that require the user's primary attention or to emphasize a primary action.
 
-_Medium_
+The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-_Small_
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
 
-| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
-| :-----------: | :---------: | :----------: | :----------: | :--------: | :-----------: | :------: |
+**ButtonDropdown**
 
 ---
 
-### Toggle Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-## Code
+**ButtonDropdown**
 
-## Button Components
+---
 
-| There are a range of Button types available to use depending on the amount of emphasis the button needs to have, its location in the UI, and whether it is existing alone or alongside other Buttons. |     | **Jump to component:** Button ButtonDropdown ButtonToggle |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------------------------------------- |
+**ButtonDropdown**
 
-### Visual Preview
+---
 
-> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
+**ButtonDropdown**
 
 ---
 
-## Button
-
-### SDS Source Code
 
-The component's source code in the SDS codebase can be found here.
 
-### SDS vs MUI
+### Secondary Rounded Dropdown Button
 
-The following props are available to MUI's `Button` component, but produce no effect (or unexpected effects) for SDS's `Button` component, so **it is recommended to not use them**:
+Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
 
-- **`variant`\*\***:\*\* This prop is intended to set the `Button` to either `text` only, `contained`, or `outlined`. With SDS's `Button`, they do not function as described in the MUI documentation; however, similar effects, specific to SDS's styles, can be achieved through a combination of the SDS-only props: `sdsStyle` and `sdsType` (see details below).
-- **`color`\*\***:\*\* SDS'S`Button`does not support this colors or intents that would be expected through this prop. However, the `sdsType` prop can be used to set the button color as `primary` or `secondary`.
-- **`size`\*\***:\*\* This prop is not supported for SDS's `Button`
-- **`disableElevation`\*\***:\*\* The SDS `Button` component doesn't have a visual "elevation" or shadowed treatment by default (which this prop disables for MUI's `Button`). Setting `disableElevation={false}` will not render the MUI default elevation treatment.
+The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
 
-Icons can be used in both MUI and SDS `Button` component, but are called in slightly different ways:
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-- **`startIcon`** and **`endIcon`\*\***:\*\* Both of these props are supported by both MUI and SDS's `Buttons`. However, MUI expects the prop to receive an individual icon as its own component (for example`startIcon={<DeleteIcon />}`), whereas SDS takes the `Icon` component which references which specific icon to call, as one of its props, as such:
+| **Default** | **Hover** | **Pressed** | **Disabled** |
+| ----------- | --------- | ----------- | ------------ |
 
-      `startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}`
+**ButtonDropdown**
 
-SDS's `Button` has additional props to allow flexibility while maintaining the SDS styles:
+---
 
-- **`sdsStyle`\*\***:\*\* takes `minimal` (default), `rounded`, or `square` or `icon` as values
-- **`sdsType`\*\***:\*\* takes `primary` (default, filled) or `secondary` (outlined) as values
+**ButtonDropdown**
 
-### MUI Documentation
+---
 
-Documentation for the underlying MUI `Button` component can be found here.
+**ButtonDropdown**
 
-### Props
+---
 
-Any custom SDS props and MUI props required for implementation are found on the tables below. See the MUI documentation for additional optional props.
+**ButtonDropdown**
 
-If `sdsStyle` is set to either `rounded` or `squared`, the props are as follows:
+---
 
-| Name        | Type          | Default         | Description                                                                                                                                                                            |
-| ----------- | ------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------- |
-| `isAllCaps` | `bool`        | `false`         | When set to `true`, the button text will be displayed in all capital letters. Please note that the `isAllCaps` attribute only applies to buttons with the `sdsStyle` set to `minimal`. |
-| `sdsStyle`  | `"rounded"    | "square"`       | `-`                                                                                                                                                                                    | Style of the button. |
-| `sdsType`   | `"primary"` ` | "secondary"`  ` | "destructive"`                                                                                                                                                                         | `-`                  | Type of the button. |
+---
 
-If `sdsStyle` is set to `minimal`, the props are listed below:
+### Rounded Dropdown Button Spacing
 
-| Name        | Type          | Default      | Description                                                                                                                                                                            |
-| ----------- | ------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| `isAllCaps` | `bool`        | `false`      | When set to `true`, the button text will be displayed in all capital letters. Please note that the `isAllCaps` attribute only applies to buttons with the `sdsStyle` set to `minimal`. |
-| `sdsStyle`  | `"minimal"`   | `-`          | Style of the button.                                                                                                                                                                   |
-| `sdsType`   | `"primary"` ` | "secondary"` | `-`                                                                                                                                                                                    | Type of the button. |
+These rules establish how much margin should exist between and around elements.
 
-And if the `sdsStyle` is set to `icon`, the props are listed below:
+**Rounded Dropdown Button Spacing**
 
-| Name           | Type                 | Default                             | Description                                |
-| -------------- | -------------------- | ----------------------------------- | ------------------------------------------ | --------------- | --------------------------------------- |
-| `sdsSize`      | `"small"` `          | "medium"`  `                        | "large"`                                   | `medium`        | Determines the size of the button icon. |
-| `sdsStyle`     | `"icon"`             | `-`                                 | Style of the button.                       |
-| `sdsType`      | `"primary"` `        | "secondary"`  `                     | "tertiary"`                                | `-`             | Type of the button icon.                |
-| `icon`         | `SDSIcon             | React.ReactElement<CustomSVGProps>` | `-`                                        | The actual icon |
-| `sdsIconProps` | `Partial<IconProps>` | `-`                                 | Props for the icon if an sds icon is used. |
+---
 
-### Code examples
+## Code
 
-#### **Default Button**
+## Button Components
 
-This example has the minimum props needed for the `Button` component.
+| Below you will find interactive Storybook iframes for each component within the Button element group. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Button ButtonIcon ButtonDropdown |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------- |
 
-**/styles.css**
+---
 
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
+### Button
 
-h1 {
-  font-size: 1.5rem;
-}
+Storybook
 
-.app {
-  padding: 20px;
-}
-```
+---
 
-**tsconfig.json**
+### ButtonIcon
 
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { Button } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <Button sdsType="primary" sdsStyle="square">
-        Label
-      </Button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
-
----
-
-#### Button + Icon
-
-This example shows a `Secondary` button component with an icon.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { Button, Icon } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <Button
-        sdsType="secondary"
-        sdsStyle="square"
-        startIcon={<Icon sdsIcon="Download" sdsSize="s" sdsType="button" />}
-      >
-        Download
-      </Button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
-
----
-
-#### Icon Button
-
-This example shows a `icon` style button component.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { Button, Icon } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <Button sdsType="primary" sdsStyle="icon" icon="Download" />
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
+Storybook
 
-**/public/index.html**
+---
 
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
-
----
-
----
-
-## ButtonDropdown
-
-### SDS Source Code
-
-The component's source code in the SDS codebase can be found here.
-
-### SDS vs MUI
-
-The SDS `ButtonDropdown` component is just the regular `Button` component, with the `chevronDown` icon added at the end of the button after the label text, via the MUI `endIcon` prop. Additionally, `ButtonDropdown` requires a `startIcon`. In SDS, both the `endIcon` and `startIcon` props take the `Icon` component, which references the specific icon to call as one of its props, like so:
-
-    	`startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}`
-
-whereas MUI expects the prop to receive an individual icon as its own component (for example`startIcon={<DeleteIcon />}`).
-
-Since `ButtonIcon` is very similar to SDS's `Button` component, similar caveats apply in terms of the MUI props. The following props are available to MUI's `Button` component, but produce no effect (or unexpected effects) for SDS's `ButtonIcon` component, so it is recommended to not use them:
-
-- **`variant`\*\***:\*\* This prop is intended to set the `Button` to either `text` only, `contained`, or `outlined`. With SDS's `ButtonIcon`, however, they do not function as described in the MUI documentation; however, similar effects, specific to SDS's styles, can be achieved through a combination of the SDS-only `sdsStyle` and `sdsType` props (see below).
-- **`color`\*\***:\*\* This prop doesn't work as expected for SDS's `ButtonIcon`, which doesn't support colors or intents. The `sdsType` prop can be used to set the button as `primary` or `secondary`, though.
-- **`size`\*\***:\*\* This prop is not supported for SDS's `ButtonIcon`
-- **`disableElevation`\*\***:\*\* The SDS `ButtonIcon` component doesn't have a visual "elevation" or shadowed treatment by default (which this prop disables for MUI's `Button`). However, setting `disableElevation={false}` will not render the MUI default elevation treatment.
-
-SDS's `ButtonIcon` has additional props to allow flexibility while maintaining the SDS styles:
-
-- **`sdsStyle`\*\***:\*\* takes `minimal` (default), `rounded`, or `square` as values
-- **`sdsType`\*\***:\*\* takes `primary` (default, filled) or `secondary` (outlined) as values
-
-### MUI Documentation
-
-Documentation for the underlying MUI component can be found here.
-
-### Props
-
-Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
-
-| Name           | Type                 | Default                             | Description                                |
-| -------------- | -------------------- | ----------------------------------- | ------------------------------------------ | --------------------------------------------- | -------------------- |
-| `icon`         | `SDSIcon             | React.ReactElement<CustomSVGProps>` | `-`                                        | An `icon` element placed before the children. |
-| `sdsStyle`     | `"icon"` `           | "rounded"`  `                       | "square"`                                  | `-`                                           | Style of the button. |
-| `sdsType`      | `"primary"           | "secondary"`                        | `-`                                        | Type of the button.                           |
-| `sdsSize`      | `"small"             | "medium"                            | "large"`                                   | `"medium"`                                    | Size of the icon.    |
-| `sdsIconProps` | `Partial<IconProps>` | `-`                                 | Props for the icon if an SDS icon is used. |
-
-### Code examples
-
-#### **Default ButtonDropdown**
-
-This example has the minimum props needed for the `ButtonDropdown` component.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { ButtonDropdown } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <ButtonDropdown sdsType="primary" sdsStyle="square">
-        Label
-      </ButtonDropdown>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
-
----
-
-#### ButtonDropdown with a start icon
-
-This example shows how to incorporate a starting icon within a `ButtonDropdown` component.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { ButtonDropdown, Icon } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <ButtonDropdown
-        icon={<Icon sdsIcon="Bacteria" sdsSize="s" sdsType="button" />}
-        sdsType="primary"
-        sdsStyle="square"
-      >
-        Bacteria Types
-      </ButtonDropdown>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
-
----
-
----
-
-## ButtonToggle
-
-### SDS Source Code
-
-The component's source code in the SDS codebase can be found here.
-
-### MUI Documentation
-
-Documentation for the underlying MUI component can be found here.
-
-### Props
-
-Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
-
-| Name       | Type       | Default                             | Description                                    |
-| ---------- | ---------- | ----------------------------------- | ---------------------------------------------- | -------------------------------------------------- | ----------------- |
-| `icon`     | `SDSIcon   | React.ReactElement<CustomSVGProps>` | `-`                                            | The `icon` element displayed within the component. |
-| `sdsStage` | `"on"` `   | "off"`                              | `off`                                          | Controls the toggle stage.                         |
-| `sdsType`  | `"primary" | "secondary"`                        | `-`                                            | Type of the button.                                |
-| `sdsSize`  | `"small"   | "medium"                            | "large"`                                       | `"medium"`                                         | Size of the icon. |
-| `disabled` | `bool`     | `false`                             | Disables the toggle button when set to `true`. |
-
-### Code examples
-
-#### **Default ButtonToggle**
-
-This example has the minimum props needed for the `ButtonToggle` component.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import * as React from "react";
-import { ButtonToggle } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  const [toggle, setToggle] = React.useState(0);
-
-  return (
-    <div className="app">
-      <ButtonToggle
-        icon="InfoCircle"
-        sdsStage={toggle ? "on" : "off"}
-        onClick={() => setToggle((prev) => !prev)}
-      >
-        Label
-      </ButtonToggle>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-**/package.json**
-
-```json
-{
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
-  },
-  "main": "/index.tsx"
-}
-```
+### ButtonDropdown
 
----
+Storybook