Tile

A tile is a rounded square that takes an asset and represents a noun.

Overview Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/tile`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/tile, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Tile props

`backgroundColor`
Description	The background color of the tile. Accepts design tokens representing background color. Defaults to `color.background.neutral`.
Type	`"color.background.accent.lime.subtlest" \| "color.background.accent.lime.subtler" \| "color.background.accent.lime.subtle" \| "color.background.accent.lime.bolder" \| "color.background.accent.red.subtlest" \| ... 53 more ... \| "black"`

`children`
Description	The asset to be displayed inside the tile. This should represent a noun.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`hasBorder`
Description	Whether the tile has a border. Defaults to `false`.
Type	`boolean`

`isInset`
Description	Whether the tile applies internal inset / padding. Used to provide appropriate spacing for assets when needed. Defaults to `true`.
Type	`boolean`

`label`
Required
Description	The label for the icon. If the tile is decorative, this can be set to an empty string.
Type	`string`

`size`
Description	The size of the tile. `xxsmall`: 16px `xsmall`: 20px `small`: 24px `medium`: 32px `large`: 40px `xlarge`: 48px
Type	`"xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge"`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

TileSkeleton props

`color`
Description	Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
Type	`string`

`isShimmering`
Description	Enables the shimmering animation.
Type	`boolean`

`shimmeringEndColor`
Description	Overrides the default shimmering ending color of skeleton.
Type	`string`

`size`
Description	No description.
Default	`"medium"`
Type	`"xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge"`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.