@czi-sds/mcp 0.16.0 → 0.17.0

package/data/zeroheight-exports/Buttons.md

@@ -1,1854 +0,0 @@
-# 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:
-
-**Button**
-
----
-
-**Button**
-
----
-
-**ButtonIcon**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**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.
-
-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**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
----
-
-### Square Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Square Button spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
----
-
-### Copy Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Copy Button spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- |
-
-**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).
-
-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** |
-| ----------- | --------- | ----------- |
-
-**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).
-
-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** |
-| ----------- | --------- | ----------- |
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
----
-
-### Icon Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Icon Button spacing**
-
----
-
-## 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:
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**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.
-
-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**
-
----
-
----
-
-### Rounded Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Rounded Button Spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**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)** | **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**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- |
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- |
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
----
-
-### Icon Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Icon Button Spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
----
-
-### Rounded Dropdown Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Rounded Dropdown Button Spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**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).
-
-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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**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
-
-| 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:
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonDropdown**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**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.
-
-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**
-
----
-
----
-
-### Rounded Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Rounded Button Spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-| **Default + Icon** | **Hover** | **Pressed** | **Disabled** |
-| ------------------ | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**Button**
-
----
-
-**Button**
-
----
-
-**Button**
-
----
-
-**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 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**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.
-
-**Minimal Button Spacing**
-
----
-
----
-
-## 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** |
-| ----------------- | --------------- | ----------- | ---------------- | -------------- | ------------ |
-
-**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**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- |
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- |
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
-**ButtonIcon**
-
----
-
----
-
-### Icon Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Icon Button_Large Spacing**
-
----
-
----
-
-## 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-### 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** |
-| ----------- | --------- | ----------- | ------------ |
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
-**ButtonDropdown**
-
----
-
----
-
-### Rounded Dropdown Button Spacing
-
-These rules establish how much margin should exist between and around elements.
-
-**Rounded Dropdown Button Spacing**
-
----
-
-## 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