@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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

@@ -0,0 +1,2339 @@
+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.
+
+[](./iframe.html?id=components-button--default)
+
+Button
+
+```
+
+<IressButton\>
+  Button
+</IressButton\>
+
+```
+
+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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Button"
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### 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.
+
+[](./iframe.html?id=components-button--mode)
+
+Primary buttonSecondary buttonTertiary button
+
+```
+
+<IressInline gap\="md"\>
+  <IressButton mode\="primary"\>
+    Primary button  </IressButton\>
+  <IressButton mode\="secondary"\>
+    Secondary button  </IressButton\>
+  <IressButton mode\="tertiary"\>
+    Tertiary button  </IressButton\>
+</IressInline\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | \- |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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".
+
+[](./iframe.html?id=components-button--status)
+
+Primary buttonSecondary buttonTertiary button
+
+Primary buttonSecondary buttonTertiary button
+
+```
+
+<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\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | \- |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | \- |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--types)
+
+buttonsubmitreset
+
+```
+
+<IressInline gap\="md"\>
+  <IressButton type\="button"\>
+    button  </IressButton\>
+  <IressButton type\="submit"\>
+    submit  </IressButton\>
+  <IressButton type\="reset"\>
+    reset  </IressButton\>
+</IressInline\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| type | 
+
+\-
+
+ | \- | \- |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--loading)
+
+Button textButton textButton text
+
+```
+
+<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\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Button text"
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 
+
+true
+
+ |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | \- |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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`.
+
+[](./iframe.html?id=components-button--buttons-as-links)
+
+[This is a link (anchor tag)](https://www.iress.com/)
+
+```
+
+<IressButton
+  href\="https://www.iress.com/"
+  rel\="opener noreferrer"
+  target\="\_blank"
+\>
+  This is a link (anchor tag)
+</IressButton\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a link (anchor tag)"
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | 
+
+"https://www.iress.com/"
+
+ |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+string
+
+
+
+ | \- | \- |
+| status | 
+
+An optional status to assign to the button.
+
+*   `success`: Indicates a successful or positive action.
+*   `danger`: Indicates a dangerous or potentially negative action.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| target | 
+
+string
+
+
+
+ | \- | \- |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--delete-confirmation)
+
+Delete button with confirm
+
+```
+
+<IressButton
+  onClick\={() \=> {}}
+  status\="danger"
+\>
+  Delete button with confirm
+</IressButton\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Delete button with confirm"
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | 
+
+ |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--fluid)
+
+Please resize your screen to see how the fluid value changes. Current breakpoint: **xl** (1200px and above).
+
+Always fluidFluid on xs and sm
+
+```
+
+<IressInline gap\="md"\>
+  <IressText element\="p"\>
+    Please resize your screen to see how the fluid value changes. Current breakpoint:{' '}
+    <kn renderLabel\="and-above" />
+    .  </IressText\>
+  <IressButton fluid\>
+    Always fluid  </IressButton\>
+  <IressButton fluid\="md"\>
+    Fluid on xs and sm  </IressButton\>
+</IressInline\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | \- |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--wrapping-text)
+
+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
+
+```
+
+<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\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--slots)
+
+Prepend iconNewPrepend badge
+
+Append iconAppend badge+999
+
+```
+
+<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\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | Set object |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| status | 
+
+An optional status to assign to the button.
+
+*   `success`: Indicates a successful or positive action.
+*   `danger`: Indicates a dangerous or potentially negative action.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--download-button)
+
+[Download logo](assets/iress-logo.png)
+
+```
+
+<IressButton
+  download
+  href\="assets/iress-logo.png"
+  prepend\={<IressIcon name\="download" />}
+\>
+  Download logo
+</IressButton\>
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Download logo"
+
+ |
+| 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.
+
+C
+
+
+
+ | \- | 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 }}`
+
+union
+
+
+
+ | \- | 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.
+
+THref
+
+
+
+ | \- | 
+
+"assets/iress-logo.png"
+
+ |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+primarysecondarytertiary
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | \- | 
+
+successdanger
+
+ |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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`.
+
+[](./iframe.html?id=components-button--element)
+
+[Iress](https://iress.com)
+
+```
+
+/\*\*
+ \* 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\>
+);
+
+```
+
+#### 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.
+
+boolean
+
+
+
+ | \- | \- |
+| append | 
+
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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.
+
+C
+
+
+
+ | \- | \- |
+| 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 }}`
+
+union
+
+
+
+ | \- | \- |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+
+THref
+
+
+
+ | \- | \- |
+| loading | 
+
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+union
+
+
+
+ | 
+
+false
+
+ | \- |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | \- |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| onClick | 
+
+Emitted when the menu item is clicked.
+
+MouseEventHandler
+
+
+
+ | \- | \- |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| status | 
+
+An optional status to assign to the button.
+
+*   `success`: Indicates a successful or positive action.
+*   `danger`: Indicates a dangerous or potentially negative action.
+
+union
+
+
+
+ | \- | \- |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | \- |
+
+`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.
+
+[](./iframe.html?id=components-button-closebutton--close-button)
+
+```
+
+<IressCloseButton
+  append\=""
+  prepend\=""
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+string
+
+
+
+ | \- |  |
+| prepend | 
+
+string
+
+
+
+ | \- |  |
+| screenreaderText | 
+
+Description for screen readers.
+
+string
+
+
+
+ | 
+
+'Close button'
+
+ | Set string |