@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/components-button-docs.md

@@ -1,1442 +0,0 @@
-[](#button)Button
-=================
-
-Overview
---------
-
-A button is a clickable item used to perform an action.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-Button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButton\>
-  Button
-</IressButton\>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| active | 
-Sets the active state of the button, usually used to indicate the button has activated a modal, popover or slideout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| append | 
-
-Content for the append slot.
-
-ReactNode
-
-
-
- | \- | Set object |
-| bg | 
-
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| children | 
-
-Content is placed between prepend and append if provided. Used to describe the expected action of this button.
-
-ReactNode
-
-
-
- | \- | 
-
-"Button"
-
- |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| element | 
-
-Change the component that will be rendered as the button, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
-
-ElementTypeundefined
-
-
-
- | \- | Set object |
-| fluid | 
-
-If `true`, the button will stretch to fill it's container. The prop is responsive, so you can set the breakpoint(s) at which the button will be fluid.
-
-All breakpoints: `fluid={true}` Up to a specific breakpoint: `fluid={{ base: true, md: false }}`
-
-true"xs""sm""md""lg""xl""xxl"undefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| href | 
-
-Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
-
-stringundefined
-
-
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| loading | 
-
-When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
-
-stringbooleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mode | 
-
-Style of the button.
-
-*   Primary: Used for the main action on a page. Usually only used once per screen.
-*   Secondary: Used for secondary actions on a page, often an action on multiple `IressPanel`s. Can used multiple times per screen.
-*   Tertiary: Used for tertiary actions on a page, often the secondary action on multiple `IressPanel`s. Can used multiple times per screen.
-
-**Migrating to version 6**
-
-*   `link` mode has been removed. If it is an action, use the `tertiary` mode. If it is a link inside a paragraph, use the new `IressLink` component instead.
-*   `danger` has been removed. Please use the `status` prop instead.
-*   `positive` and `success` have been removed. Please use the `status` prop instead.
-
-"primary""secondary""tertiary"undefined
-
-
-
- | 
-
-secondary
-
- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noWrap | 
-
-Prevents text wrapping if set to true.
-
-booleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| onClick | 
-
-Emitted when the menu item is clicked.
-
-MouseEventHandler<Exclude<Parameters<Exclude<ButtonRef<C, THref>, undefined>>\[0\], null>> | undefined
-
- | \- | Set object |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| prepend | 
-
-Content for the prepend slot.
-
-ReactNode
-
-
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| ref | 
-
-any
-
-
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| status | 
-
-An optional status to assign to the button.
-
-*   `success`: Indicates a successful or positive action.
-*   `danger`: Indicates a dangerous or potentially negative action.
-
-"danger""success"undefined
-
-
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| value | 
-
-The value of the button, when used in `IressButtonGroup`.
-
-FormControlValueundefined
-
-
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-[](#examples)Examples
----------------------
-
-### [](#modes)Modes
-
-The `mode` prop controls the visual appearance and priority of the button.
-
-*   **Primary:** Use for the main call to action. Limit to one per view.
-*   **Secondary:** Use for secondary calls to action.
-*   **Tertiary:** Use when you need extra affordance between your secondary actions.
-
-Primary buttonSecondary buttonTertiary button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInline gap\="md"\>
-  <IressButton mode\="primary"\>
-    Primary button  </IressButton\>
-  <IressButton mode\="secondary"\>
-    Secondary button  </IressButton\>
-  <IressButton mode\="tertiary"\>
-    Tertiary button  </IressButton\>
-</IressInline\>
-
-Copy
-
-### [](#status)Status
-
-The `status` prop allows you to apply a visual status to the button.
-
-*   **Success:** Usually used to indicate an action that should be perceived as positive, such as "Confirm" or "Buy".
-*   **Danger:** Use for destructive actions, such as "Delete" or "Remove". Also used for actions that are perceived as negative, such as "Cancel" or "Sell".
-
-Primary buttonSecondary buttonTertiary button
-
-Primary buttonSecondary buttonTertiary button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressInline gap\="md"\>
-    <IressButton
-      mode\="primary"
-      status\="success"
-    \>
-      Primary button    </IressButton\>
-    <IressButton
-      mode\="secondary"
-      status\="success"
-    \>
-      Secondary button    </IressButton\>
-    <IressButton
-      mode\="tertiary"
-      status\="success"
-    \>
-      Tertiary button    </IressButton\>
-  </IressInline\>
-  <IressInline gap\="md"\>
-    <IressButton
-      mode\="primary"
-      status\="danger"
-    \>
-      Primary button    </IressButton\>
-    <IressButton
-      mode\="secondary"
-      status\="danger"
-    \>
-      Secondary button    </IressButton\>
-    <IressButton
-      mode\="tertiary"
-      status\="danger"
-    \>
-      Tertiary button    </IressButton\>
-  </IressInline\>
-</IressStack\>
-
-Copy
-
-### [](#types)Types
-
-The `type` property controls the behaviour of the button. It defaults to `button`, which is the best option for most situations, but can also be set to `submit` or `reset`. `submit` should be used for buttons that submit forms, and `reset` should be used if the button clears form data and resets the form to its original state.
-
-**Please note:** this differs from a standard HTML button element, where the `type` defaults to submit.
-
-buttonsubmitreset
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInline gap\="md"\>
-  <IressButton type\="button"\>
-    button  </IressButton\>
-  <IressButton type\="submit"\>
-    submit  </IressButton\>
-  <IressButton type\="reset"\>
-    reset  </IressButton\>
-</IressInline\>
-
-Copy
-
-### [](#loading)Loading
-
-Loading buttons give the user an indication something is happening (eg. a form submission or extra content being loaded) after they have been triggered.
-
-The loading state can be activated by setting the `loading` prop to `true` and providing some `loadingText` for screenreaders to announce when in loading state (which defaults to Loading...).
-
-When the loading state is activated, any click events on the button are disabled.
-
-Button textButton textButton text
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInline gap\="md"\>
-  <IressButton
-    loading
-    mode\="primary"
-  \>
-    Button text  </IressButton\>
-  <IressButton
-    loading
-    mode\="secondary"
-  \>
-    Button text  </IressButton\>
-  <IressButton
-    loading
-    mode\="tertiary"
-  \>
-    Button text  </IressButton\>
-</IressInline\>
-
-Copy
-
-### [](#buttons-as-links)Buttons as links
-
-The `href` prop allows you to create a link that looks like a button. When set, the component will render an HTML anchor element instead of an HTML button element. This can be useful when you want to increase the target area and visual weight of a link, without changing the markup.
-
-A good example of this is the Next and Previous links in a wizard layout. These should be HTML links (to tells the user that navigation will occur when clicked) but styling them as buttons makes them more prominent.
-
-You can also use the link specific props `target` and `rel`.
-
-[This is a link (anchor tag)](https://www.iress.com/)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButton
-  href\="https://www.iress.com/"
-  rel\="opener noreferrer"
-  target\="\_blank"
-\>
-  This is a link (anchor tag)
-</IressButton\>
-
-Copy
-
-### [](#delete-confirmation)Delete confirmation
-
-Make sure that the user understands the consequences of clicking the button
----------------------------------------------------------------------------
-
-You may want to add a confirmation step to prevent accidental data loss if the action is irreversible.
-
-The confirmation step should be a modal with a simple message, as with the example below. Use a delete button for the modal's primary call to action, and use a secondary button for the cancel action.
-
-If you're using a heading, ensure that it has an appropriate heading level to match the document structure. You should use a danger variant of the `IressText` element, with the element prop set to the appropriate heading level.
-
-Delete button with confirm
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButton
-  onClick\={() \=> {}}
-  status\="danger"
-\>
-  Delete button with confirm
-</IressButton\>
-
-Copy
-
-### [](#fluid)Fluid
-
-If the `fluid` prop is set to true, the button will expand to be 100% of the width of its container.
-
-The `fluid` prop can also be set to a breakpoint size, which means the button will be fluid up until its breakpoint is passed.
-
-Please resize your screen to see how the fluid value changes. Current breakpoint: **xl** (1200px and above).
-
-Always fluidFluid on xs and sm
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInline gap\="md"\>
-  <IressText element\="p"\>
-    Please resize your screen to see how the fluid value changes. Current breakpoint:{' '}
-    <CurrentBreakpoint renderLabel\="and-above" />
-    .  </IressText\>
-  <IressButton fluid\>
-    Always fluid  </IressButton\>
-  <IressButton fluid\="md"\>
-    Fluid on xs and sm  </IressButton\>
-</IressInline\>
-
-Copy
-
-### [](#wrapping-text)Wrapping text
-
-Button text will wrap on to a new line if there's not enough space for the text to sit on a single line. If you want to prevent the text from wrapping, you can set the `noWrap` prop to `true`.
-
-If your button contains a lot of text, the text may wrap on to more than one line. You can manage this on a case by case basis by setting a minimum width on your button via CSS if you need to.
-
-Button with lots of text content that will wrap (default behaviour)
-
-Button with lots of text content and a minimum width set via CSS
-
-Button with lots of text content with the noWrap prop set to true
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressText
-  style\={{
-    width: 250
-  }}
-\>
-  <p\>
-    <IressButton\>
-      Button with lots of text content that will wrap (default behaviour)    </IressButton\>
-  </p\>
-  <p\>
-    <IressButton
-      style\={{
-        minWidth: 300
-      }}
-    \>
-      Button with lots of text content and a minimum width set via CSS    </IressButton\>
-  </p\>
-  <p\>
-    <IressButton noWrap\>
-      Button with lots of text content with the noWrap prop set to true    </IressButton\>
-  </p\>
-</IressText\>
-
-Copy
-
-### [](#slot-props)Slot props
-
-Use the slots to correctly position icons or badges inside buttons.
-
-*   **Prepend** - Places the element before the text
-*   **Append** - Places the element after the text
-
-The iconOnly slot from previous versions of IDS has been deprecated. Please use the default slot instead.
-
-Prepend iconNewPrepend badge
-
-Append iconAppend badge+999
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressInline gap\="md"\>
-    <IressButton prepend\={<IressIcon name\="home" />}\>
-      Prepend icon    </IressButton\>
-    <IressButton prepend\={<IressBadge mode\="info"\>New</IressBadge\>}\>
-      Prepend badge    </IressButton\>
-  </IressInline\>
-  <IressInline gap\="md"\>
-    <IressButton append\={<IressIcon name\="home" />}\>
-      Append icon    </IressButton\>
-    <IressButton append\={<IressBadge mode\="info"\>+999</IressBadge\>}\>
-      Append badge    </IressButton\>
-  </IressInline\>
-  <IressInline gap\="md"\>
-    <IressButton\>
-      <IressIcon name\="home" />
-    </IressButton\>
-  </IressInline\>
-</IressStack\>
-
-Copy
-
-### [](#other-attributes)Other attributes
-
-Any other attributes you pass to the component will be spread to the underlying HTML button or anchor element.
-
-This allows you to add your own aria attributes, or data attributes for analytics, as an example.
-
-**Note:** The `attrs` prop has been deprecated, and will be removed in a future version. Please pass the attributes directly to the component instead.
-
-Button text
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButton data-analytics-id\="test"\>
-  Button text
-</IressButton\>
-
-Copy
-
-### [](#download-button)Download button
-
-When a `href` is provided, the `download` prop can be used to indicate that the link should download a file instead of navigating to it. This is useful for links to files such as PDFs or images.
-
-[Download logo](assets/iress-logo.png)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButton
-  download
-  href\="assets/iress-logo.png"
-  prepend\={<IressIcon name\="download" />}
-\>
-  Download logo
-</IressButton\>
-
-Copy
-
-### [](#element)Element
-
-You can use the `element` prop to render a custom component as the button. This is useful for rendering a component from a third-party library, such as `react-router-dom`.
-
-[Iress](https://iress.com)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-/\*\*
- \* This could be the \`Link\` component from \`react-router-dom\` or any other routing library. \*/
-const Link \= forwardRef<
-  HTMLAnchorElement,
-  HTMLAttributes<HTMLAnchorElement\> & { to: string }
-\>(({ children, className, to, ...restProps }, ref) \=> (
-  <div className\={className}\>
-    <a href\={to} ref\={ref} {...restProps}\>
-      {children}
-    </a\>
-  </div\>
-));
-export const RoutingButton \= () \=> (
-  <IressButton element\={Link} to\="https://iress.com"\>
-    Iress  </IressButton\>
-);
-
-Copy
-
-[](#iressclosebutton)`IressCloseButton`
----------------------------------------
-
-`IressCloseButton` is a special variant of `IressButton` that is used to execute a close action. It is used in modals, slideouts, and other components that require a close button.
-
-It has one additional prop, `screenReaderText`, which is used to provide a screen reader only label for the close button.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCloseButton
-  append\=""
-  prepend\=""
-/>
-
-Copy
-
-#### [](#close-button-api)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| active | 
-Sets the active state of the button, usually used to indicate the button has activated a modal, popover or slideout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| append | 
-
-Content for the append slot.
-
-ReactNode
-
-
-
- | \- | 
-
-""
-
- |
-| bg | 
-
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| element | 
-
-Change the component that will be rendered as the button, used for third-party libraries that require a specific element type. By default, it will render a button or an anchor tag based on the `href` prop.
-
-undefined
-
-
-
- | \- | Set object |
-| fluid | 
-
-If `true`, the button will stretch to fill it's container. The prop is responsive, so you can set the breakpoint(s) at which the button will be fluid.
-
-All breakpoints: `fluid={true}` Up to a specific breakpoint: `fluid={{ base: true, md: false }}`
-
-true"xs""sm""md""lg""xl""xxl"undefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| href | 
-
-Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
-
-undefined
-
-
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| loading | 
-
-When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
-
-stringbooleanundefined
-
-
-
- | \- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noWrap | 
-
-Prevents text wrapping if set to true.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onClick | 
-
-Emitted when the menu item is clicked.
-
-MouseEventHandler<HTMLButtonElement> | undefined
-
- | \- | Set object |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| prepend | 
-
-Content for the prepend slot.
-
-ReactNode
-
-
-
- | \- | 
-
-""
-
- |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| screenreaderText | 
-
-Description for screen readers.
-
-stringundefined
-
-
-
- | 
-
-Close button
-
- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| status | 
-
-An optional status to assign to the button.
-
-*   `success`: Indicates a successful or positive action.
-*   `danger`: Indicates a dangerous or potentially negative action.
-
-"danger""success"undefined
-
-
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| value | 
-
-The value of the button, when used in `IressButtonGroup`.
-
-FormControlValueundefined
-
-
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Modes](#modes)
-    *   [Status](#status)
-    *   [Types](#types)
-    *   [Loading](#loading)
-    *   [Buttons as links](#buttons-as-links)
-    *   [Delete confirmation](#delete-confirmation)
-    *   [Fluid](#fluid)
-    *   [Wrapping text](#wrapping-text)
-    *   [Slot props](#slot-props)
-    *   [Other attributes](#other-attributes)
-    *   [Download button](#download-button)
-    *   [Element](#element)
-*   [IressCloseButton](#iressclosebutton)