Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Feedback & Status

Flag

A flag is a non-interactive visual indicator used to communicate status.

Status

Supported

Introduced

v0.8.0

View codeView StorybookView Design

Interactive demo

This demo allows you to preview the flag component, its variations, and configuration options.

Flag Content
Flag Size
Style Preset
Typography Preset
1import React from 'react';
2import { Flag } from 'newskit';
3
4export default () => <Flag size="small">Flag Content</Flag>;
5

Anatomy

The flag contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The flag has options that can be used to provide an appropriate experience for different use cases.

Appearance

By default, there are two styles of flag; solid and minimal, with colours set in the theme to communicate status to the user, eg. negative (red for high priority), or positive (green for active).

Size

There are three sizes of flag; small, medium, and large.

Icons (leading & trailing)

Icons can be displayed in a flag and can be positioned either before (leading) or after (trailing) the label in the flag.

Appearance

By default, there are two styles of flag; solid and minimal, with colours set in the theme to communicate status to the user, eg. negative (red for high priority), or positive (green for active).

Size

There are three sizes of flag; small, medium, and large.

Icons (leading & trailing)

Icons can be displayed in a flag and can be positioned either before (leading) or after (trailing) the label in the flag.

Usage

Here’s how and when to use the flag:

Do use flags to draw attention

Use flags to draw attention to a new feature, piece of content, or status change that may be of particular interest to a user.

Don't use flags for categorisation

Avoid using flags for categorisation other than status. Consider using a tag instead

Don't make flags interactive

Use flags as a non-interactive status indicator.

SEO considerations

  • Ensure icons have alt text applied.

API

Flag

The flag has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?