Object

An object is an icon that represents an Atlassian-specific content type.

Object explorer Examples Code Usage Changelog

Default

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

import React from 'react';

import StoryObject from '@atlaskit/object/story';

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

Size

Objects can be set to two different sizes using the size prop: small (12px) or medium (16px). This defaults to medium.

If you need a larger size, use an Object Tile instead – which is available in 20px to 48px sizes.

import React from 'react';

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

export default function ObjectSizes(): React.JSX.Element {
	return (
		<Inline space="space.100" alignBlock="end">
			<TaskObject size="small" label="Small task object (12px)" />
			<TaskObject size="medium" label="Medium task object (16px)" />
		</Inline>
	);
}

Label

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

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

Non-decorative object with a default label

Non-decorative object with a custom label

Decorative object without a label

Pull request

import React from 'react';

import Heading from '@atlaskit/heading/heading';
import IdeaObject from '@atlaskit/object/idea';
import PullRequestObject from '@atlaskit/object/pull-request';
import { Inline, Stack } from '@atlaskit/primitives/compiled';

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

Was this page helpful?

We use this feedback to improve our documentation.