Tile (Preview)

To add the Tile component to your app:

1
2
import { Tile } from "@forge/react";

Description

A tile is a rounded square container for displaying assets like icons, emojis, or objects in a consistent, styled way.

Props

Examples

Default

The default tile has a medium size, neutral background, and inset enabled – this is the default empty state.

1
2
import React from "react";
import { Tile } from "@forge/react";

export const App = () => <Tile label="" />; //The empty label indicates this is a decorative tile

Size

Tiles come in six different sizes. The size property controls both the width and height of the tile.

1
2
import React from "react";
import { Tile, Inline } from "@forge/react";

export const App = () => (
  <Inline space="space.100">
    <Tile label="Surprised face" size="xxsmall" backgroundColor="color.background.accent.red.subtle">😯</Tile>
    <Tile label="Surprised face" size="xsmall" backgroundColor="color.background.accent.red.subtle">😯</Tile>
    <Tile label="Surprised face" size="small" backgroundColor="color.background.accent.red.subtle">😯</Tile>
    <Tile label="Surprised face" size="medium" backgroundColor="color.background.accent.red.subtle">😯</Tile>
    <Tile label="Surprised face" size="large" backgroundColor="color.background.accent.red.subtle">😯</Tile>
    <Tile label="Surprised face" size="xlarge" backgroundColor="color.background.accent.red.subtle">😯</Tile>
  </Inline>
);

Background color

Tiles support a variety of background colors using the backgroundColor prop, which can be set to design tokens. This defaults to color.background.neutral.

1
2
import React from "react";
import { Tile, Inline } from "@forge/react";

export const App = () => (
  <Inline space="space.100">
    <Tile label="Rainbow" backgroundColor="color.background.accent.red.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="color.background.accent.orange.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="color.background.accent.yellow.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="color.background.accent.lime.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="color.background.accent.green.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="color.background.accent.teal.subtle">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="black">🌈</Tile>
    <Tile label="Rainbow" backgroundColor="white">🌈</Tile>
  </Inline>
);

Border and inset

You can add a border to a tile and control whether it has internal padding (inset). Disabling inset can be used for supplying assets with backgrounds, such as third-party logos. Inset is enabled by default to provide appropriate spacing for assets.

1
2
import React from "react";
import { Tile, Image, Inline } from "@forge/react";
import catAsset from './catAsset.png'

export const App = () => (
  <Inline space="space.100">
    <Tile label="Cat" hasBorder size="xlarge" backgroundColor="color.background.accent.green.subtle">
      <Image src={catAsset} alt="cat" />
    </Tile>
    <Tile label="Cat" isInset={false} hasBorder size="xlarge" backgroundColor="color.background.accent.green.subtle">
      <Image src={catAsset} alt="cat" />
    </Tile>
  </Inline>
);

Accessibility considerations

The label prop is required and serves as the accessible name for the tile. This helps users who use:

• Screen readers
• Braille displays
• Text-to-speech technology

Decorative tiles

If a tile is purely decorative and doesn't convey meaning, set the label prop to an empty string (""). This marks the tile as presentation-only and prevents screen readers from announcing it.

Non-decorative tiles

For tiles that convey meaning or add context, provide a clear, descriptive label that explains what the tile represents. Keep labels concise and meaningful:

• Describe what the tile represents, not just what it contains.
• Keep labels to no more than ~100 characters for a streamlined experience.
• Avoid using "tile of..." or "image of..." as assistive technology will provide context when encountering the tile element.