# Attributes

The API for interacting with cart and checkout attributes.

```jsx
import {
  Text,
  reactExtension,
  useAttributeValues,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const [buyerSelectedFreeTShirt, tshirtSize] =
    useAttributeValues([
      'buyerSelectedFreeTShirt',
      'tshirtSize',
    ]);

  if (Boolean(buyerSelectedFreeTShirt) === true) {
    return (
      <Text>
        You selected a free t-shirt, size:{' '}
        {tshirtSize}
      </Text>
    );
  }

  return null;
}

```

## OrderStatusApi

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

### Docs_OrderStatus_AttributesApi

### attributes

value: `StatefulRemoteSubscribable<Attribute[] | undefined>`

  - Attribute: export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}
Custom attributes left by the customer to the merchant, either in their cart or during checkout.

### Attribute

### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

## useAttributes

Returns the proposed `attributes` applied to the checkout.

### UseAttributesGeneratedType

Returns the proposed `attributes` applied to the checkout.

#### Returns: Attribute[] | undefined
export function useAttributes<
  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
>(): Attribute[] | undefined {
  const api = useApi<Target>();
  const extensionTarget = api.extension.target;

  if (!('attributes' in api)) {
    throw new ExtensionHasNoFieldError('attributes', extensionTarget);
  }

  return useSubscription(api.attributes);
}


### Attribute

### key

value: `string`

The key for the attribute.

### value

value: `string`

The value for the attribute.

## useAttributeValues

Returns the values for the specified `attributes` applied to the checkout.

### UseAttributeValuesGeneratedType

Returns the values for the specified `attributes` applied to the checkout.

#### Returns: (string | undefined)[]

#### Params:

- keys: string[]
export function useAttributeValues<
  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
>(keys: string[]): (string | undefined)[] {
  const attributes = useAttributes<Target>();

  if (!attributes?.length) {
    return [];
  }

  return keys.map((key) => {
    const attribute = attributes.find((attribute) => attribute.key === key);
    return attribute?.value;
  });
}