NewsKit Mobile Logo

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.
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.
iconSizestring
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.
widthstring
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.
heightstring
If provided, this sets a fixed height to the Flag. This can be a sizing token from the theme, or any CSS length value.
minHeightstring
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.
Refer to the defaults below for the object structure:
{
  small: {
    typographyPreset: "utilityLabel010",
    stylePreset: "flagDefault",
    spaceInset: "spaceInsetSquish010",
    minHeight: "sizing050",
    iconSize: "iconSize010",
    spaceInline: "space010"
  },
  large: {
    typographyPreset: "utilityLabel030",
    stylePreset: "flagDefault",
    spaceInset: "spaceInsetSquish020",
    minHeight: "sizing060",
    iconSize: "iconSize010",
    spaceInline: "space010"
  }
}
disabledboolean
If true, this will cause the Flag to render the disabled state of the style preset.
isLoadingboolean
If true, this will cause the Flag to render the loading state of the style preset.

Playground

Flag Content
Props
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.

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.