Inline message

An inline message lets users know when important information is available or when an action is required.

Motion in Early Access

The motion added into Inline message is in Early Access. The motion updates are currently behind the feature flag: platform-dst-motion-uplift-popup.

Default

By default, inline messages contain an icon. Adding a title is recommended. You can also include secondaryText depending on the use case.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessageDefaultExample = (): React.JSX.Element => {
	return (
		<InlineMessage title="Title" secondaryText="Secondary text">
			<p>Default type dialog</p>
		</InlineMessage>
	);
};

export default InlineMessageDefaultExample;

Title

This is the text to display first. It's bolded for emphasis.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessageTitleExample = (): React.JSX.Element => {
	return (
		<InlineMessage title="This page may be out of date">
			<p>This page was last updated 65 days ago. See the version history for more details.</p>
		</InlineMessage>
	);
};

export default InlineMessageTitleExample;

Secondary text

Use secondary text if the title alone isn't enough to convey what the inline message is about. It appears after the title.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessageSecondaryTextExample = (): React.JSX.Element => {
	return (
		<InlineMessage title="Software update" secondaryText="You've been upgraded to version 5.2">
			<p>
				We've updated you to the latest version, with added stability and new security features.
			</p>
		</InlineMessage>
	);
};

export default InlineMessageSecondaryTextExample;

Placement

By default, the popup opens at the bottom at the beginning of the text. Use placement to open the dialog from a different place in relation to the text.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessagePlacementExample = (): React.JSX.Element => {
	return (
		<InlineMessage placement="right" title="Title" secondaryText="Secondary text">
			<p>Dialog to the right</p>
		</InlineMessage>
	);
};

export default InlineMessagePlacementExample;

Appearance

Warning

Warning messages appear before we ask people to take action. This is usually in anticipation of a significant change. Warnings should also be used for authentication issues.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessageWarningExample = (): React.JSX.Element => {
	return (
		<InlineMessage appearance="warning" secondaryText="Your bill may increase">
			<p>
				<strong>Adding new users</strong>
			</p>
			<p>
				You are adding 5 new users to your selected app, if they don’t already have access to this
				app your bill may increase.
			</p>
		</InlineMessage>
	);
};

export default InlineMessageWarningExample;

Error

Error messages let people know that something has gone wrong after they've tried to do something. You can also use them to advise people of connectivity issues.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';

const InlineMessageErrorExample = (): React.JSX.Element => {
	return (
		<InlineMessage
			appearance="error"
			iconLabel="Error! This name is already in use. Try another."
			secondaryText="Username taken"
		>
			<p>This name is already in use. Try another.</p>
		</InlineMessage>
	);
};

export default InlineMessageErrorExample;

Confirmation

Confirmation messages let people know that they have completed an action.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';
import Link from '@atlaskit/link/link';

const InlineMessageConfirmation = (): React.JSX.Element => {
	return (
		<InlineMessage appearance="confirmation" secondaryText="Files have been added">
			<p>You have successfully uploaded 3 files.</p>
			<p>
				<Link href="atlassian.design">View files</Link>
			</p>
		</InlineMessage>
	);
};

export default InlineMessageConfirmation;

Info

Info messages give people additional information without requiring an action.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';
import Link from '@atlaskit/link/link';
import { Stack, Text } from '@atlaskit/primitives/compiled';

const InlineMessageInfoExample = (): React.JSX.Element => {
	return (
		<InlineMessage
			appearance="info"
			title="Access your account"
			secondaryText="Log in to see your information"
		>
			<Stack space="space.100">
				<Text>Editing description require admin permissions.</Text>
				<Text as="span">
					<Link href="http://www.atlassian.com">Learn more about admin permissions</Link>
				</Text>
			</Stack>
		</InlineMessage>
	);
};

export default InlineMessageInfoExample;

Connectivity

Connectivity messages let people know that they will need to log in to get more information. Only use this when warning and error are not appropriate.

import React from 'react';

import InlineMessage from '@atlaskit/inline-message';
import Link from '@atlaskit/link/link';
import { Text } from '@atlaskit/primitives/compiled';

const InlineMessageConnectivityExample = (): React.JSX.Element => {
	return (
		<InlineMessage
			appearance="connectivity"
			iconLabel="Log in to see more information"
			title="Access your account"
			secondaryText="Log in to see your information"
		>
			<Text as="span">
				<Link href="atlassian.design">Log in to access your account information</Link>
			</Text>
		</InlineMessage>
	);
};

export default InlineMessageConnectivityExample;

Was this page helpful?

We use this feedback to improve our documentation.