@czi-sds/mcp 0.2.1 → 0.3.0

package/data/zeroheight-exports/Buttons.md

@@ -0,0 +1,2260 @@
+# Buttons
+
+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.
+
+## Overview
+
+## Button Variants
+
+| There are a range of Button variants available for designers to use in their layouts 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.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Button for any given use case. |   | **Jump to variant:** Square Copy Icon |
+| --- | --- | --- |
+
+### Visual Preview
+
+Use the links below to jump to information on a specific Button variant:
+
+---
+
+## Square Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In napari hub + .org Codebases |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Large Primary Square Button
+
+Use for primary or emphasized actions.
+
+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** |
+| --- | --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- | --- |
+
+### Secondary Square Button
+
+Use for a secondary action, or deemphasized Button. Often paired with primary Button.
+
+Note: there is no small secondary square 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** |
+| --- | --- | --- | --- |
+
+---
+
+### Square Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Copy Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In napari hub + .org Codebases |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+Used inline within body copy when providing instructions to users that involve copying content. Any content that would need to be easily accessible by the user can be tied to the Copy Button. When clicked, the content tied to it is copied to the user's clipboard. 
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Copy Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+ 
+
+---
+
+## Icon Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In napari hub + .org Codebase |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Large 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).
+
+Use the 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** |
+| --- | --- | --- |
+
+### 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).
+
+Use the 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** |
+| --- | --- | --- |
+
+### 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).
+
+Use the 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** |
+| --- | --- | --- |
+
+---
+
+### Icon Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+ 
+
+## Code
+
+## 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 |
+| --- | --- | --- |
+
+---
+
+>These components appear as they are in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
+
+### Button
+
+Storybook
+
+---
+
+### ButtonIcon 
+
+Storybook
+
+---
+
+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.
+
+## Overview
+
+## Button Variants
+
+| There are a range of Button variants available for designers to use in their layouts 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.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Button for any given use case. |   | **Jump to variant:** Rounded Square Minimal Icon Rounded Dropdown Square Dropdown |
+| --- | --- | --- |
+
+### Visual Preview
+
+Use the links below to jump to information on a specific Button variant:
+
+---
+
+## Rounded Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ GEN EPI 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** |
+| --- | --- | --- | --- |
+
+ 
+
+### 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.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Rounded Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Square 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.
+
+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 Square Button
+
+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** |
+| --- | --- | --- | --- |
+
+| **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.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Square Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## 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** |
+| --- | --- | --- | --- |
+
+| **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** |
+| --- | --- | --- | --- |
+
+---
+
+### Minimal Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## 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)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
+| --- | --- | --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- |
+
+---
+
+### Icon Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Rounded Dropdown Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ GEN EPI Codebase |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Primary Rounded 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).
+
+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.
+
+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** |
+| --- | --- | --- | --- |
+
+ 
+
+### Secondary Rounded Dropdown Button
+
+Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
+
+The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Rounded Dropdown Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+ 
+
+## Square Dropdown Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  | In CZ GEN EPI Codebase |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Primary 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).
+
+The Primary Square 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.
+
+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** |
+| --- | --- | --- | --- |
+
+### 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).
+
+The Secondary Square Dropdown Button should be used for deemphasized or secondary actions
+
+The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Square Dropdown Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+## Code
+
+## 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 |
+| --- | --- | --- |
+
+---
+
+>These components appear as they are in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
+
+### Button
+
+Storybook
+
+---
+
+### ButtonIcon
+
+Storybook
+
+---
+
+### ButtonDropdown
+
+Storybook
+
+---
+
+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.
+
+## Overview
+
+## Button Variants
+
+| There are a range of Button variants available for designers to use in their layouts 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.  Follow the usage criteria accompanying each variant as a guide for selecting the correct Button for any given use case. |   | **Jump to variant:** Rounded Square Minimal Icon Rounded Dropdown |
+| --- | --- | --- |
+
+### Visual Preview
+
+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** |
+| --- | --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Rounded Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Square Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ ID Codebase |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Primary Square Button
+
+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.
+
+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 Square Button
+
+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** |
+| --- | --- | --- | --- |
+
+| **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.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Square Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## 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.
+
+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** |
+| --- | --- | --- | --- |
+
+| **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** |
+| --- | --- | --- | --- |
+
+ 
+
+---
+
+### Minimal Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Icon Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ ID 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)** | **Pressed** | **Default (On)** | **Hover (On)** | **Disabled** |
+| --- | --- | --- | --- | --- | --- |
+
+ 
+
+### 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** |
+| --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- | --- | --- |
+
+### 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** |
+| --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- |
+
+### 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.
+
+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** |
+| --- | --- | --- |
+
+---
+
+### Icon Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Rounded Dropdown Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ ID Codebase |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Primary Rounded 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).
+
+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.
+
+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** |
+| --- | --- | --- | --- |
+
+ 
+
+### Secondary Rounded Dropdown Button
+
+Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
+
+The options are presented in a dropdown menu; use in conjunction with Dropdown Menu component.
+
+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** |
+| --- | --- | --- | --- |
+
+---
+
+### Rounded Dropdown Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+## Code
+
+## 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
+
+Storybook
+
+---
+
+### ButtonIcon
+
+Storybook
+
+---
+
+### ButtonDropdown
+
+Storybook
+
+---
+
+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.
+
+## Guidelines
+
+## 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 variant:** Button Dropdown Button Toggle Button |
+| --- | --- | --- |
+
+### Visual Preview
+
+---
+
+## Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Button Styles
+
+All of the available Button styles are shown below, demonstrated here using the primary type.
+
+---
+
+### Live Instance
+
+Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+
+Default
+
+---
+
+### Button – Rounded
+
+Use Button – Rounded as part of top-level or primary application navigation.
+
+#### 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; title case used by default.
+
+*Title Case*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+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 |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Destructive
+
+Use the destructive 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. Label text is available in all caps or title case; title case used by default.
+
+*Title Case*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Button – Square
+
+Use Button – Square in the body or main content area of applications.
+
+#### **Primary**
+
+Alternate Button style 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*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### **Secondary**
+
+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 |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Destructive
+
+Use the destructive 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. Label text is available in all caps or title case; title case used by default.
+
+*Title Case*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Button – Minimal
+
+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.
+
+*Title Case*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+Use for a secondary or deemphasized action; often paired with a primary Button.
+
+Label text is available in all caps or title case; all caps is used by default.
+
+*Title Case*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*All Caps*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Button – Icon
+
+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.
+
+#### 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.
+
+*Large*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Medium*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Small*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+Secondary Button – Icon should be used for deemphasized or secondary actions. Can be paired with other Button components.
+
+*Large*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Medium*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Small*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Tertiary
+
+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.
+
+*Large*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Medium*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Small*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Dropdown Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Dropdown Button Styles
+
+All of the available Dropdown Button styles are shown below, demonstrated here using the primary type.
+
+---
+
+### Live Instance
+
+Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+
+Default
+
+---
+
+### Dropdown Button – Rounded
+
+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
+
+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 |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+The Secondary Rounded Dropdown Button should be used for deemphasized or secondary actions.
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Dropdown Button – Square
+
+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.
+
+#### Primary
+
+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 |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+The Secondary Rounded Dropdown Button should be used for deemphasized or secondary actions.
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Dropdown Button – Icon
+
+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.
+
+#### Primary
+
+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.
+
+*Large*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Medium*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Small*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+#### Secondary
+
+Secondary Dropdown Button – Icon should be used for deemphasized or secondary actions. Can be paired with other Button components.
+
+*Large*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Medium*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+*Small*
+
+| Default | Hover | Pressed | Disabled |
+| --- | --- | --- | --- |
+
+---
+
+### Dropdown Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+---
+
+## Toggle Button
+
+|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+### Live Instance
+
+Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
+
+Default
+
+---
+
+### Overview
+
+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.
+
+#### 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*
+
+| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+
+*Medium*
+
+| 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 |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+
+#### Secondary
+
+Toggle Button – Secondary should be used for deemphasized or secondary actions. Can be paired with other Button components.
+
+*Large*
+
+| Default (Off) | Hover (Off) | Pressed (On) | Default (On) | Hover (On) | Pressed (Off) | Disabled |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+
+*Medium*
+
+| 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 |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+
+---
+
+### Toggle Button Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+## Code
+
+## 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 |
+| --- | --- | --- |
+
+### Visual Preview
+
+>**Note:** The code examples below must install dependencies before displaying and may take extra time to load
+
+---
+
+## Button
+
+### SDS Source Code
+
+The component's source code in the SDS codebase can be found here.
+
+### SDS vs MUI
+
+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**:
+
+* **`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.
+
+Icons can be used in both MUI and SDS `Button` component, but are called in slightly different ways:
+
+* **`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:
+
+		`startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}`  
+
+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
+
+### MUI Documentation
+
+Documentation for the underlying MUI `Button` component can be found here.
+
+### 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.
+
+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:
+
+| 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. |
+
+And if the `sdsStyle` is set to `icon`, the props are listed below:
+
+| 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
+
+#### **Default Button**
+
+This example has the minimum props needed for the `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 } 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>
+);
+
+```
+
+**/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"}
+```
+
+---
+