# UI
The API for interacting with UI.

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

### ui
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**.
### overlay
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
### 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.
## Examples
The API for interacting with UI.
### 
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.
### Displaying a toast

```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>
  );
}

```