---
title: Tile
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/Tile
---

### Usage

```jsx
import { Tile } from 'nr1'
```

### Examples

#### Basic tile

```jsx
<Tile onClick={console.log}>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>
    Single location failure
  </HeadingText>
  <BlockText>
    Check your company’s style guides. Great copy that doesn’t fit with the rest
    of the interface or marketing materials can be jarring to users.
  </BlockText>
</Tile>
```

#### Disabled tile

```jsx
<Tile onClick={console.log} disabled>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>
    Single location failure
  </HeadingText>
  <BlockText>
    Check your company’s style guides. Great copy that doesn’t fit with the rest
    of the interface or marketing materials can be jarring to users.
  </BlockText>
</Tile>
```

#### Link tile

```jsx
<Tile to="https://login.newrelic.com/login">Login</Tile>
```

#### Sizes

```jsx
<Stack>
  <StackItem>
    <Tile sizeType={Tile.SIZE_TYPE.SMALL} onClick={console.log}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile sizeType={Tile.SIZE_TYPE.MEDIUM} onClick={console.log}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
</Stack>
```

#### Types

```jsx
<Stack>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.PLAIN}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.OUTLINE}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.SOLID}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
</Stack>
```

### Props

| `ariaLabel` string       | Use it to describe better the context of the component's action for users on screen readers.`<Tile to="/dashboards" ariaLabel="Go to your dashboard">   Dashboards </Tile>`                                                                                                                                                                                        |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` REQUIRED node | Content to render inside the component.                                                                                                                                                                                                                                                                                                                            |
| `className` string       | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                     |
| `disabled` boolean       | When `true`, the tile is not available for interaction.                                                                                                                                                                                                                                                                                                            |
| `onClick` function       | Callback fired any time the user clicks on the tile.                                                                                                                                                                                                                                                                                                               |
| `sizeType` enum          | Specifies the desired size of the tile (smaller sizes have less internal padding).Tile.SIZE_TYPE.MEDIUM, Tile.SIZE_TYPE.SMALL                                                                                                                                                                                                                                      |
| `spacingType` enum\[]    | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`.Tile.SPACING_TYPE.EXTRA_LARGE, Tile.SPACING_TYPE.LARGE, Tile.SPACING_TYPE.MEDIUM, Tile.SPACING_TYPE.NONE, Tile.SPACING_TYPE.OMIT, Tile.SPACING_TYPE.SMALL         |
| `style` object           | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                          |
| `testId` string          | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.**Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. |
| `to` shape\|string       | Location object or url string to link to. shape `pathname` REQUIREDstring `search` string `hash` string                                                                                                                                                                                                                                                            |
| `type` enum              | Type can be: - Plain — use when tiles don't need to be emphasized. - Outline — the default tile type. - Solid — use when tiles needs to contrast against a white background. Tile.TYPE.OUTLINE, Tile.TYPE.PLAIN, Tile.TYPE.SOLID,                                                                                                                                  |
| `value` string\|number   | Unique identifier of the tile. Used by the `<TileGroup>` to identify checked tiles.                                                                                                                                                                                                                                                                                |