Object tile

An object tile represents Atlassian-specific content in a tile.

Object tile explorer Examples Code Usage Changelog

Default

The default object tile has a medium size (32px) and a default label based on the object type.

import React from 'react';

import WhiteboardObjectTile from '@atlaskit/object/tile/whiteboard';

export default function ObjectTileDefault(): React.JSX.Element {
	return <WhiteboardObjectTile />;
}

Size

Object tiles can be set to five different sizes using the size prop, from xsmall (20px) to xlarge (48px). This defaults to medium (32px).

If you need a smaller size, use a standard Object instead – which is available in 12px or 16px sizes.

import React from 'react';

import TaskObjectTile from '@atlaskit/object/tile/task';
import { Inline } from '@atlaskit/primitives/compiled';

export default function ObjectTileSizes(): React.JSX.Element {
	return (
		<Inline space="space.100" alignBlock="end">
			<TaskObjectTile size="xsmall" label="Extra small task tile (20px)" />
			<TaskObjectTile size="small" label="Small task tile (24px)" />
			<TaskObjectTile size="medium" label="Medium task tile (32px)" />
			<TaskObjectTile size="large" label="Large task tile (40px)" />
			<TaskObjectTile size="xlarge" label="Extra large task tile (48px)" />
		</Inline>
	);
}

Label

Use the label prop to provide accessible labelling for object tiles. Use descriptive labels for meaningful object tiles, or empty strings for decorative object tiles.

If not provided, the label will default to a human-readable version of the object type (for example, "Task" for a task object tile).

Non-decorative tile with a default label

Non-decorative tile with a custom label

Decorative tile without a label

Database

import React from 'react';

import Heading from '@atlaskit/heading/heading';
import DatabaseObjectTile from '@atlaskit/object/tile/database';
import EpicObjectTile from '@atlaskit/object/tile/epic';
import { Inline, Stack } from '@atlaskit/primitives/compiled';

export default function ObjectTileLabelling(): React.JSX.Element {
	return (
		<Stack space="space.200">
			<Heading size="medium">Non-decorative tile with a default label</Heading>
			{/* No label prop needed - defaults to the content type name "Epic" */}
			<EpicObjectTile />
			<Heading size="medium">Non-decorative tile with a custom label</Heading>
			<EpicObjectTile label="Create an Epic" />
			<Heading size="medium">Decorative tile without a label</Heading>
			<Inline space="space.100" alignBlock="center">
				{/* This tile is already described by accompanying text, so no label is needed */}
				<DatabaseObjectTile label="" />
				<Heading size="small">Database</Heading>
			</Inline>
		</Stack>
	);
}

Bold

Object tiles can be displayed with a bold appearance using the isBold prop. This changes the icon color and adds a bold background color. This is disabled by default.

Default appearance

Bold appearance

import React from 'react';

import Heading from '@atlaskit/heading/heading';
import ChangesObjectTile from '@atlaskit/object/tile/changes';
import IncidentObjectTile from '@atlaskit/object/tile/incident';
import PageLiveDocObjectTile from '@atlaskit/object/tile/page-live-doc';
import { Inline, Stack } from '@atlaskit/primitives/compiled';

export default function ObjectTileBold(): React.JSX.Element {
	return (
		<Stack space="space.200">
			<Heading size="medium">Default appearance</Heading>
			<Inline space="space.100">
				<PageLiveDocObjectTile />
				<ChangesObjectTile />
				<IncidentObjectTile />
			</Inline>
			<Heading size="medium">Bold appearance</Heading>
			<Inline space="space.100">
				<PageLiveDocObjectTile isBold />
				<ChangesObjectTile isBold />
				<IncidentObjectTile isBold />
			</Inline>
		</Stack>
	);
}

Was this page helpful?

We use this feedback to improve our documentation.