Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

Examples Code Usage Changelog

Default

All flags require a title. A dismiss button will auto-display on the first flag in a FlagGroup or when the appearance prop is set.

Flags are often used within a flag group.

New version published

Scott Farquhar published a new version of this page. Refresh to see the changes.

import React from 'react';

import Flag from '@atlaskit/flag/flag';

const FlagDefaultExample = (): React.JSX.Element => {
	return (
		<Flag
			title="New version published"
			description="Scott Farquhar published a new version of this page. Refresh to see the changes."
			id="new-version"
		/>
	);
};

export default FlagDefaultExample;

Actions

Use actions to show a clickable action at the bottom of the flag. For flags where the appearance is normal, the action will show as a link. For all other appearances the actions will be buttons.

Task START-42 was created successfully

·Add to next sprint

import React from 'react';

import Flag from '@atlaskit/flag/flag';
import SuccessIcon from '@atlaskit/icon/core/status-success';
import { token } from '@atlaskit/tokens';

const FlagActionsExample = (): React.JSX.Element => {
	return (
		<Flag
			icon={<SuccessIcon color={token('color.icon.success')} label="" />}
			id="1"
			key="1"
			title="Task START-42 was created successfully"
			actions={[
				{
					content: 'View task',
					onClick: () => {
						console.log('flag action clicked');
					},
				},
				{
					content: 'Add to next sprint',
					href: '/components/flag/examples#actions',
				},
			]}
		/>
	);
};

export default FlagActionsExample;

Icons

Icons are displayed by default, but can be customized using the icon prop.

Make sure the icon and color matches the intent of your message appearance.

New version published

Scott Farquhar published a new version of this page. Refresh to see the changes.

import React from 'react';

import Flag from '@atlaskit/flag/flag';
import InformationIcon from '@atlaskit/icon/core/status-information';
import { token } from '@atlaskit/tokens';

const FlagDefaultExample = (): React.JSX.Element => {
	return (
		<Flag
			title="New version published"
			description="Scott Farquhar published a new version of this page. Refresh to see the changes."
			icon={<InformationIcon color={token('color.icon.information')} label="Info" />}
			id="new-version"
		/>
	);
};

export default FlagDefaultExample;

Appearance

Unlike normal flags, setting an appearance gives the flag a bold color. Bold appearance flags don't have a dismiss button, so they require a more direct interaction from people.

Information

Information messages alert people to additional information without requiring an action. You can also use them for loading states.

There’s no one in this project

import React from 'react';

import noop from '@atlaskit/ds-lib/noop';
import Flag from '@atlaskit/flag/flag';

const FlagInfoExample = (): React.JSX.Element => {
	return (
		<Flag
			appearance="info"
			title="There’s no one in this project"
			description="Add yourself or your team to get the party started."
			id="info"
			actions={[
				{ content: 'Add teammates', onClick: noop },
				{ content: 'Close', onClick: noop },
			]}
		/>
	);
};

export default FlagInfoExample;

Warning

Warning messages appear before we request people to take action. This is usually in anticipation of a significant change.

Never set warning flags to auto dismiss. Give people enough time to read your message and decide what to do.

This page is visible to people outside your organization

import React from 'react';

import noop from '@atlaskit/ds-lib/noop';
import Flag from '@atlaskit/flag/flag';
const FlagWarningExample = (): React.JSX.Element => {
	return (
		<Flag
			appearance="warning"
			title="This page is visible to people outside your organization"
			description="Are you sure you want to publish?"
			id="warning"
			actions={[
				{ content: 'Publish', onClick: noop },
				{ content: 'Go back', onClick: noop },
			]}
		/>
	);
};

export default FlagWarningExample;

Error

Error messages let people know that something has gone wrong after they've tried to do something or if there are connectivity issues.

Never set error flags to auto dismiss. Give people enough time to read your message and understand the problem.

We're having trouble connecting

import React from 'react';

import noop from '@atlaskit/ds-lib/noop';
import Flag from '@atlaskit/flag/flag';

const FlagErrorExample = (): React.JSX.Element => {
	return (
		<Flag
			appearance="error"
			title="We're having trouble connecting"
			description="Check your internet connection and try again."
			id="error"
			actions={[{ content: 'Try again', onClick: noop }]}
		/>
	);
};

export default FlagErrorExample;

Success

Success messages let people know they have completed an action.

Welcome to the room

import React from 'react';

import noop from '@atlaskit/ds-lib/noop';
import Flag from '@atlaskit/flag/flag';

const FlagSuccessExample = (): React.JSX.Element => {
	return (
		<Flag
			appearance="success"
			title="Welcome to the room"
			description="You’re now part of Coffee Club."
			id="success"
			actions={[{ content: 'Join the conversation', onClick: noop }]}
		/>
	);
};

export default FlagSuccessExample;

Was this page helpful?

We use this feedback to improve our documentation.