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

package/generated/docs/patterns-loading-docs.md

@@ -1,4043 +0,0 @@
-[](#loading)Loading
-===================
-
-Overview
---------
-
-The loading pattern is used to indicate that content is being loaded or processed consistently across Iress products. It can be used in various scenarios, such as loading entire applications, pages, components or server-side validation.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  initialise: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 3000);
-    }),
-  data: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-  chart: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const \[chart, setChart\] \= useState(false);
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[loaded, setLoaded\] \= useState(false);
-  const \[updating, setUpdating\] \= useState(false);
-  const safeLoaded \= IressLoading.shouldRender(loaded);
-  const deferredMoney \= useDeferredValue(money);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newChart \= await API.chart();
-      setChart(newChart);
-      setLoaded(() \=> true);
-    };
-    void initialise();
-  }, \[\]);
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gap\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoading\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  const \[data, setData\] \= useState(false);
-  const loaded \= data !== false;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newData \= await API.data();
-      setData(newData);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
-  }
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-export const LoadingWizard \= () \=> {
-  const \[page, setPage\] \= useState(0);
-  const loaded \= page \> 0;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      await API.initialise();
-      setPage(1);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="start-up" loaded\={loaded} />;
-  }
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && <StartPage setPage\={setPage} />}
-      {page \=== 2 && <RetirementIncomeProjectionPage />}
-    </IressContainer\>
-  );
-};
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| pattern | 
-Use `pattern="start-up"` for the following use cases:
-
-*   Loading an application for the first time
-*   Switching from a different application to a new application
-*   Switching from a client's website to an Iress application
-*   Switching themes Use `pattern="validate"` for the following use cases:
-*   Submitting a form
-*   Saving a record Use `pattern="page"` for the following use cases:
-*   Detail page for a record
-*   Form page
-*   Article page Use `pattern="component"` for the following use cases:
-*   Component that is expected to be slow to load, such as a chart, table or large graphic.
-*   Component that can be refreshed/updated with new data. The long loading pattern will display a checklist of items that are being loaded.
-
-Use `pattern="long"` for the following use cases:
-
-*   Calling multiple slow APIs to load data
-*   Loading results from AI
-*   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads) Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time. Example use cases:
-*   Navigating between different routes
-*   Calling an API within the page that does not require a loading state
-
-"page""default""validate""start-up""component""long"undefined
-
-
-
- | \- | \- |
-
-[](#usage)Usage
----------------
-
-The main prop for the `IressLoading` component is the `pattern` prop. This prop determines the type of loading pattern to be used. The available options are:
-
-1.  `component`: This pattern is used to indicate that a specific component is loading. It is typically used when the there is a slower compoent on the page that requires its own loading state. Examples include:
-    *   Loading a table with a large number of rows
-    *   Loading a chart with a large number of data points
-2.  `default`: This pattern is used when no other pattern matches a scenario, and will only indicate loading if something is taking a long time to load. It is used when long loading times are not expected. Examples include:
-    *   Navigation
-3.  `long`: Loading pattern for a component that is expected to take longer than 10 seconds to load. It displays a checklist of items that are being loaded. Examples:
-    *   Calling multiple slow APIs to load data
-    *   Loading results from AI
-    *   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
-4.  `page`: This pattern is used to indicate that a page is loading. It is the most common loading pattern, allowing the users to see the entire content at once where possible. Examples include:
-    *   Detail page for a record
-    *   Form/Article page
-    *   Dashboard page
-5.  `start-up`: This pattern is used to indicate that the application is loading. It is typically used when the application is first launched. Examples include:
-    *   Loading a new application
-    *   Switching from a different application to a new application
-    *   Switching from a client's website to an Iress application
-    *   Switching themes
-6.  `validate`: This pattern is used to indicate that a server-side validation is in progress. It is typically used when the user is submitting a form or performing an action that requires validation. Examples include:
-    *   Submitting a form
-    *   Saving a record
-
-It is **recommended** to read the Patterns section of the documentation to understand how to use the loading patterns effectively.
-
-### [](#be-consistent)Be consistent
-
-Apart from using the `IressLoading` component, there are a few things you need to do to ensure you are using the loading patterns correctly to ensure consistency across Iress products.
-
-*   Consider the difference between what the system is doing and what the user is doing. For example, when a user is submitting a form, the system may be calling different APIs and you may be tempted to use the different loading patterns for each API. However, the user is only submitting the form once, so you should only use one loading pattern for the entire form submission process. In most cases, it will be the `page` loading pattern.
-*   When switch between different applications, consider using the same loading pattern. This will help mask the loading time and improve the user experience.
-
-[](#behaviour)Behaviour
------------------------
-
-The `IressLoading` component is designed to create a seamless experience for users when loading content. They have been designed to meet best practices and improve user perception of loading times.
-
-![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/@fs/app/packages/components/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
-
-Image © [UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a)
-
-* * *
-
-To match the above image, the default behaviour of the loading patterns are as follows:
-
-*   Between 0 - 500ms: No loading indicator, it will be assumed that the content is already loaded.
-*   Between 500ms - 2 seconds: A loading indicator will animate in. It will either be a skeleton or a progress bar.
-*   Between 2 - 5 seconds: A loading message will animate in.
-*   Between 5 - 10 seconds: Some components support additional loading messages. These will animate in and out to indicate that the content is still loading and as well as give the user the perception something is happening in the background.
-*   After 10 seconds: Components display a list of messages to indicate what actions the system is doing to complete the user's request. These are checked off as they are completed. This is to give the user the perception that something is happening in the background and to keep them informed of what is happening.
-
-In future releases, we will be adding support for the following:
-
-*   After 10 seconds (background): it is always best not to block the user from using the application even if the system is busy. This will be a future feature of the `long` loading pattern.
-
-* * *
-
-The `IressLoading` patterns have been built using `IressSkeleton`, `IressSpinner` and `IressProgressBar` and other components, reducing the need to create custom loading components.
-
-[](#patterns)Patterns
----------------------
-
-### [](#component)`component`
-
-The `component` loading pattern is used to indicate that a specific component is loading. It is typically used when the there is a slower component on the page that requires its own loading state. You would usually use this pattern when loading data visualisations such as charts and tables.
-
-#### [](#behavior)Behavior
-
-1.  When `loaded` is false, a skeleton will be displayed immediately (configured using `timeout.skeleton`). This skeleton can be customised using the `template` prop.
-2.  When `loaded` is true, the skeleton will be removed and the `children` will be displayed.
-3.  When `updated` is true, the `children` will be faded out to indicate the component is loading.
-4.  After 1000ms (configured using `timeout.update`), the `Updating...` message will be fade in. This message can be customised using the `updated` prop.
-
-#### [](#custom-skeletons)Custom skeletons
-
-The skeleton representing the component should be as simple as possible, it does not need to be a perfect representation of the component. In most cases a simple rectangle is sufficient that takes up the approximate same space as the component that is loading.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-![](/@fs/app/packages/components/src/patterns/Loading/mocks/retirement-graph.png)
-
-Update
-
-Hide codeRefresh
-
-\[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; }
-
-const API \= {
-  chart: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-export const LoadingGraph \= () \=> {
-  const \[graph, setGraph\] \= useState(false);
-  const \[updating, setUpdating\] \= useState(false);
-  const renderLoading \= IressLoading.shouldRender(graph);
-  const doUpdate \= useCallback(() \=> {
-    const update \= async () \=> {
-      await API.chartUpdate();
-      setUpdating(false);
-    };
-    setUpdating(true);
-    void update();
-  }, \[\]);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      setGraph(await API.chart());
-    };
-    void initialise();
-  }, \[\]);
-  return (
-    <IressLoading
-      pattern\="component"
-      template\="chart"
-      loaded\={!renderLoading}
-      update\={updating}
-    \>
-      <IressStack gap\="md" style\={{ display: 'inline-block' }}\>
-        <div\>
-          <Graph />
-        </div\>
-        <IressButton onClick\={doUpdate}\>Update</IressButton\>
-      </IressStack\>
-    </IressLoading\>
-  );
-};
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| children\* | 
-
-The chart that is being loaded for the first time or being refreshed/updated.
-
-ReactNode
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| loaded | 
-
-If set to `true`, will hide the skeleton and display the chart.
-
-booleanundefined
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| pattern | 
-
-Use `pattern="component"` for the following use cases:
-
-*   Component that is expected to be slow to load, such as a chart, table or large graphic.
-*   Component that can be refreshed/updated with new data.
-
-"component"undefined
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| screenReaderText | 
-
-Only screen readers will see this message, it is changed to the `message` after the delay.
-
-ReactNode
-
-
-
- | 
-
-Loading...
-
- | \- |
-| 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
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| template | 
-
-Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
-
-ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | "chart" | undefined
-
- | 
-
-chart
-
- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| timeout | 
-
-Set the timeouts for showing the skeleton and update messages.
-
-{ skeleton?: number | undefined; update?: number | undefined; } | undefined
-
- | \- | \- |
-| update | 
-
-Set the chart to be updated. If a `ReactNode` is provided, it will be displayed as the message. If set to `true`, will display the default message `Updating...`.
-
-ReactNode
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-
-### [](#default)`default`
-
-The `default` loading pattern is used when no other pattern matches a scenario, and will only indicate loading if something is taking a long time to load. It is used when long loading times are not expected.
-
-This pattern is used when the user is navigating between different pages or sections of the application.
-
-#### [](#behavior-1)Behavior
-
-1.  Displays nothing by default
-    
-2.  After 3000ms (configured using `timeout`), the `This is taking longer than expected...` message will be slide in from top center. This message can be customised using the `children` prop.
-    
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-This is taking longer than expected...
-
-Hide codeRefresh
-
-\[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; }
-
-<IressLoading pattern\="default" />
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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 | 
-
-Message to display when the loading time is longer than expected.
-
-ReactNode
-
-
-
- | 
-
-<IressInline />
-
-
-
- | 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 |
-| 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 |
-| 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 |
-| 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 |
-| 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 |
-| pattern | 
-
-Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time. Example use cases:
-
-*   Navigating between different routes
-*   Calling an API within the page that does not require a loading state
-
-"default"undefined
-
-
-
- | \- | 
-
-"default"
-
- |
-| 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 |
-| 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 | 
-
-Only screen readers will see this message, it is changed to the `children` message after the delay.
-
-ReactNode
-
-
-
- | 
-
-Loading...
-
- | 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 |
-| 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 |
-| timeout | 
-
-Delay in milliseconds before the message is displayed.
-
-numberundefined
-
-
-
- | 
-
-3000
-
- | 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 |
-
-### [](#long)`long`
-
-The `long` loading pattern is used to indicate an expected long loading time, usually longer than 10 seconds to complete. It is typically used when calling multiple third-party APIs, AI generation and other long running tasks.
-
-It has a required prop, `messageList`, which is an object map where the key is the time you want the message to be marked as completed and the value is the message to display. The messages will be completed (checked off) as the time elapses.
-
-#### [](#behavior-2)Behavior
-
-1.  When `loaded` is false, a progress bar and check list will be displayed after 500ms (configured using `timeout.message`). This progress bar can be customised using the `renderProgress` prop.
-2.  The messages will rotate until the `loaded` prop is set to true.
-    *   When a message falls within its elapsed time, it will be displayed with an animated ellipsis, indicating that the system is still working on it.
-    *   When a message is completed, it will be displayed with a check mark.
-3.  When `loaded` is true, all items in the checklist are completed and the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
-4.  When `error` is true, the error message will be displayed, overriding the progress bar and checklist. This message can be customised using the `error` prop. The error message will be displayed with a red background.
-
-#### [](#adjusting-the-progress-bar)Adjusting the progress bar
-
-The `long` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
-
-If your application is capable of calculating real progress, you can pass the `progress` prop to the `IressLoading` component and that value will be used instead.
-
-Once the `loaded` prop is set to true, the progress bar will always be set to 100% and the loading pattern will fade out.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-*   Finished: Processing transcript
-*   Finished: Noting key information
-*   Finished: Generating summary
-    
-    ...
-    
-
-Hide codeRefresh
-
-\[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; }
-
-<IressLoading
-  messageList\={{
-    '3000': 'Processing transcript',
-    '5000': 'Noting key information',
-    '7000': 'Generating summary'
-  }}
-  pattern\="long"
-/>
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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 | 
-
-The children are displayed while loading. This will be displayed above the progress bar and checklist.
-
-ReactNode
-
-
-
- | \- | 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 |
-| error | 
-
-An error to display if the loading fails. This will override the `messageList` and show an error message instead.
-
-ReactNode
-
-
-
- | \- | Set object |
-| estimatedFinishTime | 
-
-Estimated time in milliseconds for the loading to finish.
-
-numberundefined
-
-
-
- | 
-
-10000
-
- | 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 |
-| 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 |
-| loaded | 
-
-If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
-
-booleanundefined
-
-
-
- | \- | 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 |
-| messageList | 
-
-A checklist to display while loading. The key is the time when you want the item to be checked.
-
-Record<number, ReactNode>
-
- | { } | 
-
-RAW
-
-messageList : {
-
-*   3000 : "Processing transcript"
-*   5000 : "Noting key information"
-*   7000 : "Generating summary"
-
-}
-
-
-
-
-
- |
-| 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 |
-| 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 |
-| pattern | 
-
-The long loading pattern will display a checklist of items that are being loaded.
-
-Use `pattern="long"` for the following use cases:
-
-*   Calling multiple slow APIs to load data
-*   Loading results from AI
-*   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
-
-"long"undefined
-
-
-
- | \- | 
-
-"long"
-
- |
-| 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 |
-| progress | 
-
-If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
-
-numberundefined
-
-
-
- | \- | 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 |
-| renderProgress | 
-
-This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
-
-((props: Pick<IressProgressProps, "value" | "max" | "sectionTitle">) => ReactNode) | undefined
-
- | 
-
-element
-
-
-
- | \- |
-| 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 |
-| 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 |
-| timeout | 
-
-Set the timeouts for showing the progress bar and message.
-
-{ loaded?: number | undefined; message?: number | undefined; } | undefined
-
- | \- | 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 |
-
-### [](#page)`page`
-
-The `page` loading pattern is used to indicate that a page is loading. It is the most common loading pattern, allowing the users to see the entire content at once where possible.
-
-#### [](#behavior-3)Behavior
-
-1.  When `loaded` is false, a skeleton will be displayed after 500ms (configured using `timeout`). This skeleton can be customised using the `template` prop.
-2.  If `critical` is set whilst `loaded` is false, the critical content will be displayed immediately. This is useful for showing critical content while the rest of the page is loading.
-3.  When `loaded` is true, the skeleton will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
-
-#### [](#custom-skeletons-1)Custom skeletons
-
-The skeleton does not need to be a perfect representation of the page. It is recommended to follow the guidelines below when creating custom `template` skeletons:
-
-*   If there are multiple rows, only create a skeleton of the first row. This is enough to give the user an idea of what the content will look like.
-*   If there are multiple filters, only create a few filters in the general area where they will appear.
-*   For cards, keep the skeleton as simple as possible. It does not need to be a perfect representation of the card. In most cases a title, description and image is sufficient.
-
-For your convenience, we have provided a few templates that you can use in the `template` prop, including: `page`, `form` and `dashboard`.
-
-#### [](#critical-content)Critical content
-
-In some cases it may be useful to show critical content while the rest of the page is loading. This gives the user a preview of what to expect. The example below shows a loading page with critical content by using the `critical` prop.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-Dashboard
-=========
-
-* * *
-
-Financial update 2025
----------------------
-
-The ASX update
---------------
-
-In the news
------------
-
-Loading...
-
-Hide codeRefresh
-
-\[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; }
-
-const API \= {
-  criticalContent: async () \=>
-    new Promise<ReactNode\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(
-          <IressContainer\>
-            <IressStack gap\="lg"\>
-              <IressRow horizontalAlign\="between" verticalAlign\="middle"\>
-                <IressText element\="h1" mb\="none"\>
-                  Dashboard                </IressText\>
-                <IressInline gap\="lg"\>
-                  <IressSkeleton textStyle\="typography.body.lg" width\="200px" />
-                  <IressSkeleton textStyle\="typography.body.lg" width\="200px" />
-                </IressInline\>
-              </IressRow\>
-              <IressDivider />
-              <IressRow gutter\="lg"\>
-                <IressCol span\="4"\>
-                  <IressCard
-                    stretch
-                    heading\="Financial update 2025"
-                    media\={<IressSkeleton mode\="rect" height\="300px" />}
-                  \>
-                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
-                  </IressCard\>
-                </IressCol\>
-                <IressCol span\="4"\>
-                  <IressCard
-                    stretch
-                    heading\="The ASX update"
-                    media\={<IressSkeleton mode\="rect" height\="300px" />}
-                  \>
-                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
-                  </IressCard\>
-                </IressCol\>
-                <IressCol span\="4"\>
-                  <IressCard
-                    stretch
-                    heading\="In the news"
-                    media\={<IressSkeleton mode\="rect" height\="300px" />}
-                  \>
-                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
-                  </IressCard\>
-                </IressCol\>
-              </IressRow\>
-            </IressStack\>
-          </IressContainer\>,
-        );
-      }, 3000);
-    }),
-};
-export const LoadingDashboard \= () \=> {
-  const \[critical, setCritical\] \= useState<ReactNode | undefined\>();
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      setCritical(await API.criticalContent());
-    };
-    void initialise();
-  }, \[\]);
-  return (
-    <IressLoading pattern\="page" critical\={critical} template\="dashboard" />
-  );
-};
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| critical | 
-
-If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
-
-ReactNode
-
-
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| loaded | 
-
-If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
-
-booleanundefined
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| pattern | 
-
-Use `pattern="page"` for the following use cases:
-
-*   Detail page for a record
-*   Form page
-*   Article page
-
-"page"undefined
-
-
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| screenReaderText | 
-
-Only screen readers will see this message.
-
-ReactNode
-
-
-
- | 
-
-Loading...
-
- | \- |
-| 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
-
- | \- | \- |
-| 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
-
-
-
- | \- | \- |
-| template | 
-
-Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
-
-"form" | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | "page" | "dashboard" | undefined
-
- | 
-
-page
-
- | \- |
-| 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
-
- | \- | \- |
-| 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
-
- | \- | \- |
-| timeout | 
-
-Delay in milliseconds before the skeleton is displayed.
-
-numberundefined
-
-
-
- | 
-
-500
-
- | \- |
-| 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
-
- | \- | \- |
-
-### [](#start-up)`start-up`
-
-The `start-up` loading pattern is used to indicate that the application is loading. It is typically used when the application is first launched. This pattern is used when the application is first launched or when switching from a different application to a new application. It is also used when switching from a client's website to an Iress application or switching themes.
-
-#### [](#behavior-4)Behavior
-
-1.  When `loaded` is false, a progress bar will be displayed after 500ms (configured using `timeout.progress`). This progress bar can be customised using the `renderProgress` prop.
-2.  When `loaded` is false after 2.5 seconds (configured using `timeout.message`), the message will be displayed. This message can be customised using the `children` or `messageList` prop.
-3.  If using `messageList`, the messages will rotate until the `loaded` prop is set to true.
-4.  When `loaded` is true, the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
-
-#### [](#adjusting-the-progress-bar-1)Adjusting the progress bar
-
-The `start-up` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
-
-If your application is capable of calculating real progress, you can pass the `progress` prop to the `IressLoading` component and that value will be used instead.
-
-Once the `loaded` prop is set to true, the progress bar will always be set to 100% and the loading pattern will fade out.
-
-#### [](#rotating-messages)Rotating messages
-
-The start-up process is often used initialise the application and load any necessary data. This can include loading user preferences, settings, and any other data that is required to make using the application quicker and easier, however this may add burden to the loading time.
-
-To compensate for this, you can pass multiple messages to the pattern using the `messageList` prop. The `messageList` accepts an object map where the key is the time you want the message to start displaying (in milliseconsds) and the value is the message to display. The messages will rotate until the `loaded` prop is set to true.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-Hide codeRefresh
-
-\[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; }
-
-<IressLoading
-  messageList\={{
-    '0': <IressText color\="colour.neutral.70"\>Switching applications...</IressText\>,
-    '4500': <IressText color\="colour.neutral.70"\>This is taking longer than expected...</IressText\>
-  }}
-  pattern\="start-up"
-/>
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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 | 
-
-Message to display when the loading time is longer than expected.
-
-ReactNode
-
-
-
- | 
-
-<IressText />
-
-
-
- | Set object |
-| estimatedFinishTime | 
-
-Estimated time in milliseconds for the loading to finish.
-
-numberundefined
-
-
-
- | 
-
-3000
-
- | 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 |
-| 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 |
-| loaded | 
-
-If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
-
-booleanundefined
-
-
-
- | \- | 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 |
-| messageList | 
-
-A message list to display while loading. The key is the time when you want the message to change to this message. If using a message list, the `children` will not be displayed.
-
-Record<number, ReactNode> | undefined
-
- | \- | 
-
-RAW
-
-messageList : {
-
-0 : {...} 0 keys
-
-4500 : {...} 0 keys
-
-}
-
-
-
-
-
- |
-| 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 |
-| 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 |
-| pattern | 
-
-Use `pattern="start-up"` for the following use cases:
-
-*   Loading an application for the first time
-*   Switching from a different application to a new application
-*   Switching from a client's website to an Iress application
-*   Switching themes
-
-"start-up"undefined
-
-
-
- | \- | 
-
-"start-up"
-
- |
-| 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 |
-| progress | 
-
-If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
-
-numberundefined
-
-
-
- | \- | 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 |
-| renderProgress | 
-
-This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
-
-((props: Pick<IressProgressProps<undefined>, "value" | "max" | "sectionTitle">) => ReactNode) | undefined
-
- | (props) => <IressProgress {...props} /> | \- |
-| 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 | 
-
-Only screen readers will see this message, it is changed to the `children` message after the delay.
-
-ReactNode
-
-
-
- | 
-
-Loading...
-
- | 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 |
-| 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 |
-| timeout | 
-
-Set the timeouts for showing the progress bar and message.
-
-{ loaded?: number | undefined; message?: number | undefined; progress?: number | undefined; } | undefined
-
- | \- | 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 |
-
-### [](#validate)`validate`
-
-The `validate` loading pattern is used to indicate that a server-side validation is in progress. It is typically used when the user is submitting a form or performing an action that requires validation and the user is not expected to leave the page.
-
-#### [](#behavior-5)Behavior
-
-1.  When `loading` is false, the button will be displayed immediately (customised using the `renderButton` prop, or the `children` prop if you do not mind passing in the `loading` prop twice).
-2.  When `loading` is true, the button will be disabled and a spinner will be displayed.
-3.  When `loading` is true after 2.5 seconds (configured using `timeout`), the message will be displayed. This message can be customised using the `message` prop. Its placement can be adjusted using the `position` prop.
-
-#### [](#message-position)Message position
-
-Forms come in all shapes and sizes, and the `IressLoading` component is designed to be flexible enough to work with any form. The `position` prop allows you to adjust the placement of the loading message. The available options are:
-
-*   `top`: The message will be displayed above the button. It is absolute positioned to the top of the button, and will not disrupt the layout of the form.
-*   `bottom` (default): The message will be displayed below the button. It is absolute positioned to the bottom of the button, and will not disrupt the layout of the form.
-*   `right`: The message will be displayed on the right of the button. It is inline, and will push any content to the right of the button down.
-
-* * *
-
-Beta
-
-**New component**
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-Submit
-
-This is taking longer than expected...
-
-Cancel
-
-Hide codeRefresh
-
-\[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\="sm"\>
-  <IressLoading
-    loading
-    pattern\="validate"
-  />
-  <IressButton mode\="tertiary"\>
-    Cancel  </IressButton\>
-</IressInline\>
-
-Copy
-
-#### [](#props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| 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 |
-| 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 |
-| 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
-
- | 
-
-true
-
- |
-| 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 |
-| message | 
-
-Set the message to be displayed when the button is in the loading state.
-
-ReactNode
-
-
-
- | 
-
-This is taking longer than expected...
-
- | 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 |
-| 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 |
-| pattern | 
-
-Use `pattern="validate"` for the following use cases:
-
-*   Submitting a form
-*   Saving a record
-
-"validate"undefined
-
-
-
- | 
-
-validate
-
- | 
-
-"validate"
-
- |
-| 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 |
-| position | 
-
-This sets where the loading message will be displayed.
-
-*   `bottom` - The loading message will be displayed below the button. It will be absolute positioned.
-*   `top` - The loading message will be displayed above the button. It will be absolute positioned.
-*   `right` - The loading message will be displayed to the right of the button. It will be inline positioned.
-
-"bottom""right""top"undefined
-
-
-
- | 
-
-bottom
-
- | 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 |
-| 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 |
-| renderButton | 
-
-This is a render prop that allows you to override the default button rendering. This is useful if you want to use a different button component or if you want to add additional props to the button.
-
-((props: Pick<IressButtonProps, "loading">) => ReactNode) | undefined
-
- | (props: Pick<IressButtonProps, 'className' | 'loading'>) => ( <IressButton {...props} type="submit"> Submit </IressButton> ) | \- |
-| 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 |
-| 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 |
-| timeout | 
-
-The time in milliseconds before the loading message is displayed.
-
-numberundefined
-
-
-
- | 
-
-2500
-
- | 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 |
-
-[](#suspense)Suspense
----------------------
-
-Since React 18, React has introduced a new way to handle loading states using `Suspense`, allowing you to lazy load components in an efficient manner.
-
-The `IressLoadingSuspense` component is a wrapper around the `IressLoading` component that uses `Suspense` to handle loading states. It is used in the same way as the `IressLoading` component, however you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook. The `IressLoadingSuspense` component will automatically handle the loading state for you.
-
-The wizard example can be translated to use `IressLoadingSuspense` as follows (it includes the slow and fast examples).
-
-**Differences in behaviour**
-
-*   The `IressLoadingSuspense` component will automatically handle the loading state for you, so you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook.
-*   Nested suspense components will be handled by the highest `IressLoadingSuspense` component. This means that if you have multiple nested `IressLoadingSuspense` components, only the top most one will display a loading state. You can see this in the example when you click the Next button, you no longer see the component loading pattern due to it being nested under the page loading pattern.
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  getHomePage: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 3000);
-    });
-    return 1;
-  },
-  getRetirementIncomeProjection: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 2000);
-    });
-    return true;
-  },
-  getChart: async () \=> {
-    await new Promise((resolve) \=> {
-      const chartImage \= new Image();
-      chartImage.src \= retirementGraph;
-      setTimeout(resolve, 1000);
-    });
-    return true;
-  },
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const initialChart \= IressLoadingSuspense.use(API.getChart);
-  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[updating, setUpdating\] \= useState(false);
-  const deferredMoney \= useDeferredValue(money);
-  const chart \= updatedChart ?? initialChart;
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setUpdatedChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoadingSuspense pattern\="component" update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gap\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoadingSuspense\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  const promise \= API.getRetirementIncomeProjection;
-  IressLoadingSuspense.use(promise);
-  IressLoadingSuspense.uncache(promise);
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-const HomePage \= () \=> {
-  const promise \= API.getHomePage;
-  const startPage \= IressLoadingSuspense.use(promise);
-  IressLoadingSuspense.uncache(promise);
-  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
-  const page \= movedPage ?? startPage;
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
-        </IressLoadingSuspense\>
-      )}
-      {page \=== 2 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          <RetirementIncomeProjectionPage />
-        </IressLoadingSuspense\>
-      )}
-    </IressContainer\>
-  );
-};
-export const LoadingSuspenseWizard \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  getHomePage: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 300);
-    });
-    return 1;
-  },
-  getRetirementIncomeProjection: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 200);
-    });
-    return true;
-  },
-  getChart: async () \=> {
-    await new Promise((resolve) \=> {
-      const chartImage \= new Image();
-      chartImage.onload \= resolve;
-      chartImage.src \= retirementGraph;
-    });
-    return true;
-  },
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      setTimeout(() \=> {
-        resolve(true);
-      }, 200);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const initialChart \= IressLoadingSuspense.use(API.getChart);
-  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[updating, setUpdating\] \= useState(false);
-  const deferredMoney \= useDeferredValue(money);
-  const chart \= updatedChart ?? initialChart;
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setUpdatedChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoadingSuspense pattern\="component" update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gap\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoadingSuspense\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  IressLoadingSuspense.use(API.getRetirementIncomeProjection);
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-const HomePage \= () \=> {
-  const startPage \= IressLoadingSuspense.use(API.getHomePage);
-  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
-  const page \= movedPage ?? startPage;
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
-        </IressLoadingSuspense\>
-      )}
-      {page \=== 2 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          <RetirementIncomeProjectionPage />
-        </IressLoadingSuspense\>
-      )}
-    </IressContainer\>
-  );
-};
-export const LoadingSuspenseWizardFast \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
-[](#hooks)Hooks
----------------
-
-### [](#iressloadingshouldrender)`IressLoading.shouldRender`
-
-The `IressLoading.shouldRender` hook is used to determine whether the loading pattern should be displayed or not. It is used to control the visibility of the loading pattern based on the `loaded` prop.
-
-Its main function is to delay the un-mounting of the loading pattern when the `loaded` prop is set to true to allow for a fade out animation.
-
-\[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;
-}
-
-const \[loaded, setLoaded\] \= useState(false);
-const renderLoading \= IressLoading.shouldRender(loaded);
-// Use renderLoading instead of !loaded for the smooth transition.
-if (renderLoading) return <IressLoading pattern\="page" loaded\={loaded} />;
-else return <IressText\>Content is loaded</IressText\>;
-
-Copy
-
-### [](#iressloadingsuspenseuse)`IressLoadingSuspense.use`
-
-The `IressLoadingSuspense.use` hook is a polyfill for the React 19 `use` hook, allowing you to have similar functionality in React 18. It is used to handle loading states when using `IressLoadingSuspense`.
-
-It is not as smart as the `use` hook in React 19, it will cache the result of the promise and will not re-fetch the data if the component is re-mounted. You can clear a function's results in the cache by using the `IressLoadingSuspense.uncache` function.
-
-Avoid in React 19
------------------
-
-If you are using React 19, it is recommended to use the built-in `use` hook instead of this one. In future releases, this hook will be deprecated and removed from the library.
-
-\[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;
-}
-
-const HomePage \= () \=> {
-  const pageData \= IressLoadingSuspense.use(API.fetchPage('home'));
-  return (
-    <IressText\>
-      <h2\>{pageData.title}</h2\>
-      <p\>{pageData.description}</p\>
-    </IressText\>
-  );
-};
-export const App \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
-[](#examples)Examples
----------------------
-
-Below are some examples of how to use the `IressLoading` component in different scenarios.
-
-### [](#wizard)Wizard
-
-Here you can see how a wizard can use the `IressLoading` component at different stages of the application. The first example shows a `slow` wizard, and the second example shows how the same code looks when the requests are fast. The main difference is you see minimal loading inidicators in the second example, improving the perception that the system is fast.
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  initialise: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 3000);
-    }),
-  data: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-  chart: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const \[chart, setChart\] \= useState(false);
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[loaded, setLoaded\] \= useState(false);
-  const \[updating, setUpdating\] \= useState(false);
-  const safeLoaded \= IressLoading.shouldRender(loaded);
-  const deferredMoney \= useDeferredValue(money);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newChart \= await API.chart();
-      setChart(newChart);
-      setLoaded(() \=> true);
-    };
-    void initialise();
-  }, \[\]);
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gap\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoading\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  const \[data, setData\] \= useState(false);
-  const loaded \= data !== false;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newData \= await API.data();
-      setData(newData);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
-  }
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-export const LoadingWizard \= () \=> {
-  const \[page, setPage\] \= useState(0);
-  const loaded \= page \> 0;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      await API.initialise();
-      setPage(1);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="start-up" loaded\={loaded} />;
-  }
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && <StartPage setPage\={setPage} />}
-      {page \=== 2 && <RetirementIncomeProjectionPage />}
-    </IressContainer\>
-  );
-};
-
-Copy
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  initialise: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a fast network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 300);
-    }),
-  data: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a fast network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 300);
-    }),
-  chart: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a fast network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 300);
-    }),
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a fast network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 300);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const \[chart, setChart\] \= useState(false);
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[loaded, setLoaded\] \= useState(false);
-  const \[updating, setUpdating\] \= useState(false);
-  const safeLoaded \= IressLoading.shouldRender(loaded);
-  const deferredMoney \= useDeferredValue(money);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newChart \= await API.chart();
-      setChart(newChart);
-      const testImg \= new Image();
-      testImg.onload \= () \=> setLoaded(true);
-      testImg.src \= retirementGraph;
-    };
-    void initialise();
-  }, \[\]);
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gap\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoading\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  const \[data, setData\] \= useState(false);
-  const loaded \= data !== false;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      const newData \= await API.data();
-      setData(newData);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
-  }
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-export const LoadingWizardFast \= () \=> {
-  const \[page, setPage\] \= useState(0);
-  const loaded \= page \> 0;
-  const renderLoading \= IressLoading.shouldRender(loaded);
-  useEffect(() \=> {
-    const initialise \= async () \=> {
-      await API.initialise();
-      setPage(1);
-    };
-    void initialise();
-  }, \[\]);
-  if (renderLoading) {
-    return <IressLoading pattern\="start-up" loaded\={loaded} />;
-  }
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && <StartPage setPage\={setPage} />}
-      {page \=== 2 && <RetirementIncomeProjectionPage />}
-    </IressContainer\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Be consistent](#be-consistent)
-*   [Behaviour](#behaviour)
-*   [Patterns](#patterns)
-    *   [component](#component)
-    *   [default](#default)
-    *   [long](#long)
-    *   [page](#page)
-    *   [start-up](#start-up)
-    *   [validate](#validate)
-*   [Suspense](#suspense)
-*   [Hooks](#hooks)
-    *   [IressLoading.shouldRender](#iressloadingshouldrender)
-    *   [IressLoadingSuspense.use](#iressloadingsuspenseuse)
-*   [Examples](#examples)
-    *   [Wizard](#wizard)