TileButton

@coinbase/cds-web@8.64.0

A pressable tile component that displays a pictogram or custom content with a title and optional count. Used for grid-based navigation and quick actions.

import { TileButton } from '@coinbase/cds-web/buttons/TileButton'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• Button,
• IconButton

Basic usage

Loading...

󰙡

Live Code

<TileButton title="Coinbase" pictogram="2fa" onClick={() => {}} />

With count

Loading...

󰙡

Live Code

<TileButton title="Notifications" pictogram="addToWatchlist" count={3} onClick={() => {}} />

With custom content

Loading...

󰙡

Live Code

<TileButton count={0} onClick={() => {}} title="Bitcoin">
  <RemoteImage source={assets.btc.imageUrl} />
</TileButton>

Show overflow

Loading...

󰙡

Live Code

<Box height={180}>
  <TileButton
    title="A very long title that will overflow and show the full text on hover"
    pictogram="chart"
    showOverflow
    onClick={() => {}}
  />
</Box>