# GridItem (/docs/products/dash-dots/reference/components/grid-item)

Goes inside a `Grid`. Keep the `label` to a word or two, as tiles are narrow.

**Children:** Nothing

## Example

`GridItem` is used inside `Grid`:

![The Grid component](/assets/images/dash-dots/components/grid.webp)

```xml title="view.dml"
<Grid columns="3" gap="small">
  <GridItem icon="send" label="Send" onTap="open" data-page="send" />
  <GridItem icon="wallet" label="Top up" onTap="open" data-page="top-up" />
  <GridItem icon="receipt" label="Bills" badge="2" onTap="open" data-page="bills" />
</Grid>
```

```ts title="controller.ts"
export default definePage({
  initialState: {},
  actions: {
    open(_state, event: DataEvent<{ page: 'send' | 'top-up' | 'bills' }>) {
      this.navigation.push(event.data.page);
    },
  },
});
```

## Props

| Prop       | Type                                                                                                                                                          | What it is                                                                       |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| `label`    | `string`                                                                                                                                                      |                                                                                  |
| `icon`     | [icon name](/docs/products/dash-dots/reference/components#icon-names), or one of [your own icons](/docs/products/dash-dots/developers/theming#your-own-icons) |                                                                                  |
| `image`    | `string`                                                                                                                                                      | A picture in place of `icon`. It takes the same addresses as an `Image`'s `src`. |
| `badge`    | `string`                                                                                                                                                      | A short note on the item's corner, such as "New" or a count.                     |
| `disabled` | `boolean`                                                                                                                                                     | Dims it, and the person can't use it. Default: `false`.                          |

## Events

| Event   | Sends   | Notes |
| ------- | ------- | ----- |
| `onTap` | Nothing |       |