Last modified: August 22, 2025
The Tile component renders a square tile that can contain other components. Use this component to create groups of related components.
tile-component-example
import { Tile, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <>
      <Tile>
        <Text>
          This is the default tile. It has a small amount of left padding
        </Text>
      </Tile>
      <Tile compact={true}>
        <Text>
          This is a compact tile. It reduces the amount of padding within.
        </Text>
      </Tile>
      <Tile flush={true}>
        <Text>This is a flush tile. It has no left padding</Text>
      </Tile>
    </>
  );
};
PropTypeDescription
compactBooleanWhen set to true, reduces the amount of padding in the tile. Default is false.
flushBooleanWhen set to true, removes left and right padding from the tile contents. Default is false.

​
Variants

Using the flush prop, you can remove left and right padding from the tile contents.
  • flush={false} (default)
design-guidelines-tile-styles_1
  • flush={true}
design-guidelines-tile-styles_2

​
Usage examples

  • Group a form and its inputs together.
  • Group a bulleted text summary and statistics components together.