Banner - Examples - Components

A banner displays a prominent message at the top of the screen.

Appearance

Warning

The default form of a banner. Use warning banners when you want the user to take a specific action or to warn them that something is about to go wrong.

Payment details needed. To stay on your current plan, add payment details by June 30, 2020. Add payment details

import React from 'react';

import Banner from '@atlaskit/banner';
import WarningIcon from '@atlaskit/icon/core/status-warning';
import Link from '@atlaskit/link/link';

const BannerWarningExample = (): React.JSX.Element => {
	return (
		<Banner appearance="warning" icon={<WarningIcon label="Warning" />}>
			Payment details needed. To stay on your current plan, add payment details by June 30, 2020.{' '}
			<Link href="/components/banner/examples">Add payment details</Link>
		</Banner>
	);
};

export default BannerWarningExample;

Error

Use error banners to inform users something critical has happened and requires immediate attention.

Bitbucket is experiencing an incident. Check our status page for more details. Status page

Announcement

Announcement banners are used by admins who want to make a general announcement about the app. These banners do not contain an icon.

We’re making changes to our server and Data Center apps, including the end of sale for new server licenses on February 2, 2021 and the end of support for server on February 2, 2024. Upcoming app changes

import React from 'react';

import Banner from '@atlaskit/banner';
import Link from '@atlaskit/link/link';

const BannerAnnouncementExample = (): React.JSX.Element => {
	return (
		<Banner appearance="announcement">
			We’re making changes to our server and Data Center apps, including the end of sale for new
			server licenses on February 2, 2021 and the end of support for server on February 2, 2024.{' '}
			<Link href="/components/banner/examples">Upcoming app changes</Link>
		</Banner>
	);
};

export default BannerAnnouncementExample;

Truncation

Banner width can change based on the size of the browser. Lengthy text will be truncated with an ellipses.

For longer content that wraps, compose your banner with design token primitives instead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, odio egestas pulvinar sodales, neque justo tempor tellus, eget venenatis arcu ante non purus. Pellentesque tellus eros, rutrum vel enim non, tempor faucibus felis. Nullam pharetra erat sed magna porttitor, eget tincidunt odio finibus

import React from 'react';

import { cssMap } from '@compiled/react';

import Banner from '@atlaskit/banner';
import WarningIcon from '@atlaskit/icon/core/status-warning';
import { Box } from '@atlaskit/primitives/compiled';

const containerStyles = cssMap({
	root: {
		maxWidth: '400px',
		margin: 'auto',
	},
});

const message =
	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, odio egestas pulvinar sodales, neque justo tempor tellus, eget venenatis arcu ante non purus. Pellentesque tellus eros, rutrum vel enim non, tempor faucibus felis. Nullam pharetra erat sed magna porttitor, eget tincidunt odio finibus';

const BannerOverflowExample = (): React.JSX.Element => {
	return (
		<Box xcss={containerStyles.root}>
			<Banner icon={<WarningIcon label="Warning" />}>{message}</Banner>
		</Box>
	);
};

export default BannerOverflowExample;

Was this page helpful?

We use this feedback to improve our documentation.