@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

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

@@ -0,0 +1,2078 @@
+Button
+======
+
+Overview
+--------
+
+A button is a clickable item used to perform an action.
+
+[](./iframe.html?id=components-button--default)
+
+Button
+
+```
+
+<IressButton\>
+  Button
+</IressButton\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Button"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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.
+*   **Link:** Use when you need a button to appear like a link.
+*   **Danger:** Use for added affordance on destructive actions, such as deleting data.
+*   **Positive:** Use for buy/purchase actions.
+*   **Negative:** Use for sell actions.
+
+**Note:** Avoid setting `mode` to `link` when the only child of the button is an icon, as icons inside link buttons do not have an underline, and will have no visual indication that they are clickable.
+
+[](./iframe.html?id=components-button--mode)
+
+Primary buttonSecondary buttonTertiary buttonLink buttonDanger buttonPositive buttonNegative button
+
+```
+
+<div
+  className\="iress-u-inline iress--gutter--md"
+  style\={{
+    rowGap: 'var(--iress-g-spacing-md'
+  }}
+\>
+  <IressButton mode\="primary"\>
+    Primary button  </IressButton\>
+  <IressButton mode\="secondary"\>
+    Secondary button  </IressButton\>
+  <IressButton mode\="tertiary"\>
+    Tertiary button  </IressButton\>
+  <IressButton mode\="link"\>
+    Link button  </IressButton\>
+  <IressButton mode\="danger"\>
+    Danger button  </IressButton\>
+  <IressButton mode\="positive"\>
+    Positive button  </IressButton\>
+  <IressButton mode\="negative"\>
+    Negative button  </IressButton\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | \- |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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)
+
+Button buttonReset buttonSubmit button
+
+```
+
+<div className\="iress-u-inline iress--gutter--md"\>
+  <IressButton type\="button"\>
+    Button button  </IressButton\>
+  <IressButton type\="reset"\>
+    Reset button  </IressButton\>
+  <IressButton type\="submit"\>
+    Submit button  </IressButton\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | \- |
+| 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 text
+
+```
+
+<div className\="iress-u-inline iress--gutter--md"\>
+  <IressButton loading\>
+    Button text  </IressButton\>
+  <IressButton loading />
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Button text"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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`.
+
+If you need to use custom routing, take a look at the custom route slot documentation below.
+
+[](./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 |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | 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)"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | \- |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | \- |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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
+  mode\="danger"
+  onClick\={() \=> {}}
+\>
+  Delete button with confirm
+</IressButton\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | 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"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | 
+
+"danger"
+
+ |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| onClick | 
+
+function
+
+
+
+ | \- | \- |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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).
+
+Fluid: trueFluid: xsFluid: smFluid: mdFluid: lgFluid: xlFluid: xxl
+
+```
+
+<div
+  className\="iress-u-inline iress--gutter--md"
+  style\={{
+    rowGap: 'var(--iress-g-spacing-md'
+  }}
+\>
+  <IressText element\="p"\>
+    Please resize your screen to see how the fluid value changes. Current breakpoint:{' '}
+    <kn renderLabel\="and-above" />
+    .  </IressText\>
+  <IressButton fluid\>
+    Fluid: true  </IressButton\>
+  <IressButton fluid\="xs"\>
+    Fluid: xs  </IressButton\>
+  <IressButton fluid\="sm"\>
+    Fluid: sm  </IressButton\>
+  <IressButton fluid\="md"\>
+    Fluid: md  </IressButton\>
+  <IressButton fluid\="lg"\>
+    Fluid: lg  </IressButton\>
+  <IressButton fluid\="xl"\>
+    Fluid: xl  </IressButton\>
+  <IressButton fluid\="xxl"\>
+    Fluid: xxl  </IressButton\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | \- |
+| href | 
+
+Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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
+
+```
+
+<div
+  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\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| 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
+
+```
+
+<\>
+  <p className\="iress-u-inline iress--gutter--md"\>
+    <IressButton prepend\={<IressIcon name\="home" />}\>
+      Prepend icon    </IressButton\>
+    <IressButton prepend\={<IressBadge mode\="info"\>New</IressBadge\>}\>
+      Prepend badge    </IressButton\>
+  </p\>
+  <p className\="iress-u-inline iress--gutter--md"\>
+    <IressButton append\={<IressIcon name\="home" />}\>
+      Append icon    </IressButton\>
+    <IressButton append\={<IressBadge mode\="info"\>+999</IressBadge\>}\>
+      Append badge    </IressButton\>
+  </p\>
+  <p className\="iress-u-inline iress--gutter--md"\>
+    <IressButton\>
+      <IressIcon name\="home" />
+    </IressButton\>
+  </p\>
+</\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-button--attrs)
+
+Button text
+
+```
+
+<IressButton data-analytics-id\="test"\>
+  Button text
+</IressButton\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Button text"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | Set string |
+| 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Download button
+
+Whilst `IressButton` does not have a `download` property, it can be configured quite easily.
+
+Please see the example below. The use of an icon is optional.
+
+[](./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 |
+| --- | --- | --- | --- |
+| append | 
+Content for the append slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| attrs | 
+
+Accepts key/value pairs of attributes to be applied to the rendered native element.
+
+Record<string, string | boolean>
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use the native HTML attributes instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| children | 
+
+Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Download logo"
+
+ |
+| download | 
+
+If provided a href, will download the file instead of open it within the browser. Has no effect if href is not provided.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fluid | 
+
+If `true`, the button will stretch to fill it's container. If set to a breakpoint, the button will be fluid up till that breakpoint.
+
+union
+
+
+
+ | 
+
+false
+
+ | 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.
+
+string
+
+
+
+ | \- | 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.
+
+union
+
+
+
+ | 
+
+'secondary'
+
+ | Set object |
+| noWrap | 
+
+Prevents text wrapping if set to true.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| prepend | 
+
+Content for the prepend slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| rel | 
+
+Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+
+string
+
+
+
+ | \- | Set string |
+| target | 
+
+Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+
+string
+
+
+
+ | \- | Set string |
+| type | 
+
+The type of the button.
+
+union
+
+
+
+ | 
+
+'button'
+
+ | Set object |
+| value | 
+
+The value of the button, when used in `IressButtonGroup`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+`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 |