# Interface: OrderComponent

Represents an order component.

The OrderComponent interface defines the structure of an order component. It includes properties for the ID, key, and payload.

## Extends[#](#extends)

*   [`ComponentPayload`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/componentpayload/)

## Extended by[#](#extended-by)

*   [`CanvasMenuActionButton`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/canvasmenuactionbutton/)
*   [`CanvasMenuCustomActionButton`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/canvasmenucustomactionbutton/)
*   [`NavigationBarActionButton`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/navigationbaractionbutton/)
*   [`NavigationBarCustomActionButton`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/navigationbarcustomactionbutton/)
*   [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/ordercomponentwithchildren/)

## Type Parameters[#](#type-parameters)

| Type Parameter | Default type |
| --- | --- |
| `I` | [`ComponentId`](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/type-aliases/componentid/) |

## Indexable[#](#indexable)

```
[key: string]: unknown
```

## Properties[#](#properties)

| Property | Type |
| --- | --- |
| `id` | `I` |
| `key?` | `string` |

---



[Source](https:/img.ly/docs/cesdk/sveltekit/api/cesdk-js/interfaces/numberinputoptions)