---
title: UI
description: The API for interacting with UI.
api_version: 2024-10
api_name: customer-account-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/ui'
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/ui.md
---

# UI

The API for interacting with UI.

## StandardApi

The base API object provided to this and other `customer-account` extension targets.

* ui

  Ui

  required

  Methods to interact with the extension's UI.

### Ui

* forceDataRefresh

  Refresh data so the surrounding information on the page is updated. The \`content\` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click \*\*Apps\*\*. 2. Select the app you need to request access for. 3. Click \*\*API access\*\*. 4. Under \*\*Access force data refresh\*\*, click \*\*Request access\*\*.

  ```ts
  (content: string) => Promise<void>
  ```

* overlay

  An overlay is a contextual element on top of the main interface that provides additional information or functionality.

  ```ts
  { close(overlayId: string): void; }
  ```

* toast

  The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \\\`Changes saved\\\`. For errors, or information that needs to persist on the page, use a \[banner]\(/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.

  ```ts
  { show(content: string): void; }
  ```

```ts
export interface Ui {
  /**
   * An overlay is a contextual element on top of the main interface that provides additional information or functionality.
   */
  overlay: {
    close(overlayId: string): void;
  };
  /**
   * The Toast API displays a non-disruptive message that displays at the bottom
   * of the interface to provide quick, at-a-glance feedback on the outcome
   * of an action.
   *
   * How to use:
   *
   * - Use toasts to confirm successful actions.
   *
   * - Aim for two words.
   *
   * - Use noun + past tense verb format. For example, \`Changes saved\`.
   *
   * For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
   */
  toast: {
    show(content: string): void;
  };
  /**
   * Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful.
   *
   * To request access to this API:
   *
   * 1. Go to your partner dashboard and click **Apps**.
   *
   * 2. Select the app you need to request access for.
   *
   * 3. Click **API access**.
   *
   * 4. Under **Access force data refresh**, click **Request access**.
   */
  forceDataRefresh(content: string): Promise<void>;
}
```

## Examples

### Examples

* #### Displaying a toast

  ##### Description

  Here is an example of using the \`Toast.show\` method to display a message to the customer indicating that their action to select a pickup address was successful.

  ##### React

  ```jsx
  import React, {useState} from 'react';
  import {
    reactExtension,
    useApi,
    Button,
    Select,
    Modal,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension('customer-account.page.render', () => (
    <Extension />
  ));
  function Extension() {
    const [selectedAddress, setSelectedAddress] = useState();
    const [pickupAddress, setPickupAddress] = useState();
    const {i18n, ui} = useApi<'customer-account.page.render'>();
    return (
      <Modal>
        <Select
          onChange={(value) => {
            setSelectedAddress(value);
          }}
          label="Pickup Address Options"
          value="1"
          options={[
            {
              value: '1',
              label: 'Address 1',
            },
            {
              value: '2',
              label: 'Address 2',
            },
            {
              value: '3',
              label: 'Address 3',
            },
            {
              value: '4',
              label: 'Address 4',
            },
          ]}
        />
        <Button
          onPress={() => {
            setPickupAddress(selectedAddress);
            ui.toast.show('Selection saved');
          }}
        >
          Save
        </Button>
      </Modal>
    );
  }
  ```