Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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>
    </>
  );
};

​
Props

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.
Last modified on March 30, 2026