# Attributes
The API for interacting with cart and checkout attributes.
### Attribute values

```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
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
### Attribute

### key
The key for the attribute.
### value
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
The key for the attribute.
### value
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;
  });
}