# p-button-tile
The `p-button-tile` is an interactive component that displays a provided image to tease content and performs form or **interaction** events within one container. Whenever you want to provide navigational elements, stick to the [Link Tile](../p-link-tile/p-link-tile.md) component instead.
**Note:** The component does not take care of processing and aligning the image.
An `![]()
`, `` or `` tag has to be provided as default slot.
Additionally, the properties `description` and `label` are required. The `description` property is used as a teaser with a more detailed description of the button and its action.
The `label` property is used to describe the button.
## Usage
### Do:
- Use Button Tile for **on-page interactivity**.
- Use [Link Tile](../p-link-tile/p-link-tile.md) instead if you want to **navigate** to another page.
- Use Button Tile with appropriate aspect ratios and short descriptions (80 characters or fewer).
- Use basic Button Tile for better perception tests and compact Button Tile for improved spacing (especially on mobile).
- Use gradient Button Tile when image contrast is insufficient and select images with natural contrast.
- Use font size for visual hierarchy and customize image type and font size for responsiveness.
- Use engaging verbs and product names in compact Button Tile.
- Create assets upfront for image processing.
### Don't:
- Don't manipulate images, keep them natural and contrasted.
- Don't write long descriptions that overflow content (especially on mobile).
## Accessibility support
### Keyboard
| Key / state | Function |
| --- | --- |
| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
| `Enter`, `Space` | Activates the button. |
| `disabled` | Button still focusable. |
### ARIA enhancements
#### External **ARIA** provided by the `aria` property:
| ARIA | Usage |
| --- | --- |
| `aria-label` | Defines a string value that labels an interactive element. It's required for buttons with `hideLabel="true"`. |
| `aria-description` | Defines a string value that adds a more detailed description of the interactive element. |
| `aria-expanded` | Exposes a visual state (e.g. expanded/collapsed) of another element. |
| `aria-pressed` | Exposes the `pressed` state of a toggle button. |
| `aria-haspopup` | Defines that the button opens a popup (e.g. `dialog`). It can be used in combination with `aria-expanded` to indicate the state of the popup. |
## Limitations
Due to the nature of **Web Components** and **shadow DOM**, there are limitations when using some **ARIA** attributes to define relationships between elements across different shadow DOMs or shadow DOM/light DOM combinations.
| ARIA | Support |
| --- | --- |
| `aria-labelledby` | 🚫 |
| `aria-describedby` | 🚫 |
| `aria-owns` | 🚫 |
| `aria-controls` | 🚫 |
| `aria-activedescendant` | 🚫 |
## Development considerations
### Labelling
If the text of the button does not clearly indicate what the button's function is, add a brief, descriptive label using the `aria` property with the `aria-label` value to provide more context for screen reader users. Phrases like "Detail" or "Open" can be unclear when read out of context by a screen reader. In such instances, provide an alternative text that offers more detailed information, such as "Open details of product XYZ."
### Common do's and don'ts
- **Do** pass ARIA attributes via the `aria` prop when the visible label needs more context.
- **Do** provide a descriptive `label` that explains the tile action.
- **Do** add `aria-label` on slotted `