Newskit Logo
About

Flag

Overview

The flag element is used as a way of showing the status of the content.

Usage

A flag is used to show that a stream is live, or content has been created or updated.

Props

Flags have a number of props to facilitate a variety of uses:

childrenstring
The content of the Flag is passed as the child of the component.
sizeFlagSize = FlagSize.Small
Optional size of the Flag.
disabledboolean
If true, this will cause the Flag to render the disabled state of the style preset.
loadingboolean = false
If true, this will cause the Flag to render the loading state of the style preset.
overridesobject
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Flag accepts:
spaceInsetMQ<string>
If provided, this overrides the padding of the Flag. Otherwise, spaceInsetSquish010 or spaceInsetSquish020 is used depending on the `size` prop.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Flag.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Flag. Otherwise, utilityLabel010 or utilityLabel030 is used depending on the `size` prop.
spaceInlineMQ<string>
If provided, this overrides the space between multiple children in the underlying Stack. If less than 2 children are passed, this prop is irrelevant.
iconSizeMQ<string>
If provided, this overrides the icon size of any child icons. If no icons are present in the Flag's children then this prop is irrelevant.

Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.
widthMQ<string>
If provided, this sets a fixed width to the Flag. This can be a sizing token from the theme, or any CSS length value, e.g. 100% for a full-width element.
heightMQ<string>
If provided, this sets a fixed height to the Flag. This can be a sizing token from the theme, or any CSS length value.
minHeightMQ<string>
If provided, this sets a minimum height to the Flag. This can be a sizing token from the theme, or any CSS length value. By default, sizing050 or sizing060 is used depending on the `size` prop.
maxHeightMQ<string>
If provided, this sets a maximum height to the Flag. This can be a sizing token from the theme, or any CSS length value.
maxWidthMQ<string>
If provided, this sets a maximum width to the Flag. This can be a sizing token from the theme, or any CSS length value.
Refer to the defaults below for the object structure:
{
  small: {
    typographyPreset: "utilityButton010",
    stylePreset: "flagBrand",
    spaceInset: "spaceInsetSquish010",
    minHeight: "sizing050",
    iconSize: "iconSize010",
    spaceInline: "space010"
  },
  medium: {
    typographyPreset: "utilityButton020",
    stylePreset: "flagBrand",
    spaceInset: "spaceInsetSquish010",
    minHeight: "sizing060",
    iconSize: "iconSize010",
    spaceInline: "space010"
  },
  large: {
    typographyPreset: "utilityButton030",
    stylePreset: "flagBrand",
    spaceInset: "spaceInsetSquish010",
    minHeight: "sizing070",
    iconSize: "iconSize010",
    spaceInline: "space010"
  }
}

Playground

Flag Content
Flag Size
Spacing Preset
Style Preset
Typography Preset
import React from 'react';
import { Flag } from 'newskit';

export default () => (
  <Flag size="small" overrides={{}}>
    Flag Content
  </Flag>
);

For more information on overriding component defaults, see the docs here.

Variations

NewsKit provides six types of predefined style preset flags variants.

Types

StylePresetFlag
flagSolid
Text
flagSolidLive
Text
flagMinimal
Text

Inverse presets

StylePresetFlag
flagSolidInverse
Text
flagSolidLiveInverse
Text
flagMinimalInverse
Text

Rationale

Styling

Flags are designed to be compact and discreet as they are intended to supplement the primary content.

Accessibility

Colour

Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.