# @bolttech/atoms-tile
> The **Tile** component is a versatile React component that represents a selectable tile element, which can display an icon, image, or text, and allows user interaction.
Latest version **0.19.3** (published 2026-06-08) · 0 weekly downloads
## Install
```sh
npm install @bolttech/atoms-tile
pnpm add @bolttech/atoms-tile
yarn add @bolttech/atoms-tile
bun add @bolttech/atoms-tile
```
## Health
**Score 50/100 (C)** — status: active.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.19.3 |
| Published | 2026-06-08 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 125.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |
## Links
- npm: https://www.npmjs.com/package/@bolttech/atoms-tile
- npm.io page: https://npm.io/package/@bolttech/atoms-tile
## Dependencies (6)
- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9
- [@material-symbols/font-300](https://npm.io/package/@material-symbols/font-300.md) ^0.5.5
- [@bolttech/frontend-foundations](https://npm.io/package/@bolttech/frontend-foundations.md) 0.12.3
## Recent versions
- 0.19.3 (latest) — 2026-06-08
- 0.19.2 — 2026-06-03
- 0.19.0 — 2026-04-08
- 0.17.2 — 2026-03-17
- 0.17.1 — 2024-09-26
- 0.17.0 — 2024-09-04
- 0.16.0 — 2024-06-17
- 0.15.0 — 2024-04-01
- 0.14.2 — 2024-01-24
- 0.14.1 — 2023-11-29
- 0.14.0 — 2023-11-21
- 0.13.1 — 2023-11-07
- 0.13.0 — 2023-11-06
- 0.12.1 — 2023-09-26
- 0.0.1 — 2023-09-26
- … 28 more at https://npm.io/package/@bolttech/atoms-tile/versions
## README
# Tile Component
The **Tile** component is a versatile React component that represents a selectable tile element, which can display an icon, image, or text, and allows user interaction.
## Table of Contents
- [Tile Component](#tile-component)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Example](#example)
- [Contributing](#contributing)
## Installation
To use the **Tile** component in your React application, follow these steps:
```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-tile
```
or
```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-tile
```
Once you have the required dependencies installed, you can start using the `Tile` component in your React application.
## Usage
The **Tile** component provides a flexible way to create selectable tiles with various content types, such as icons, images, and text. Users can interact with the tiles, and you can track the selected state using the `onClick` prop.
To use the component, import it and include it in your JSX:
```jsx
import React from 'react';
import { Tile } from '@bolttech/atoms-tile';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // You can import your Tile component here
function App() {
const handleTileSelect = (isSelected) => {
console.log(`Tile selected: ${isSelected}`);
};
return (
} title="Image Tile" onClick={handleTileSelect} dataTestId="image-tile" variant="image" />
);
}
export default App;
```
## Props
The `Tile` component accepts the following props:
| Prop | Type | Description |
| ------------ | -------------------------------------- | --------------------------------------------------------------------------- | --------- | --------------------------------------------- |
| `id` | string | The `id` attribute for the tile container. |
| `dataTestId` | string | The `data-testid` attribute for testing purposes. |
| `variant` | `TileVariants` | The visual style variant of the tile. |
| `icon` | `MaterialSymbol` | The name of the icon to display in the tile (if using icon variant). |
| `image` | `React.ReactElement` | The JSX element representing the image (if using image variant). |
| `subtitle` | string | The text that will be rendered below your title icon or image. |
| `title` | string | The text that will be rendered below your icon or image. |
| `selected` | boolean | Whether the tile is selected or not. Default is `false`. |
| `onClick` | `(isSelected: boolean) => void` | A callback function to be executed when the tile is selected or deselected. |
| `disabled` | boolean | Whether the tile should be disabled. |
| `alignment` | `'left' | 'right' | 'center'` | The alignment of the content within the tile. |
| `infoLabel` | string | The label of the info area. |
| `infoIcon` | `MaterialSymbol` | Icon from the info section. |
## Example
Here's an example of using the **Tile** component:
```jsx
}
title="Image Tile"
onClick={handleTileSelect}
dataTestId="image-tile"
variant="image"
/>
```
This will render two selectable tiles with different content types.
## Contributing
Contributions to the **Tile** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.
---
_Source: https://npm.io/package/@bolttech/atoms-tile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._