Stable

Logo

The Logo component is used to render an nib brand logo on screen.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Brands

The default export from this package looks to the ThemeProvider to know which brand logo to render. As such, it must be used inside our Theme component.

Installation

bash

npm install @nib-components/logo

Usage

There are two primary ways to use the Logo component, depending on your application's branding requirements.

Named imports

Import a Specific Logo (Recommended for Single/fewer Brand Apps). If your application targets a single/fewer brands, you can import that logo directly. This approach helps reduce bundle size and it is the recommended approach.

jsx

import NibLogo from '@nib-components/logo/nib';

Or if you support a few brands:

jsx

import NibLogo from '@nib-components/logo/nib';
import GuLogo from '@nib-components/logo/gu';
import ImanLogo from '@nib-components/logo/iman';
import {useContext} from 'react';
import {ThemeContext} from 'styled-components';

const Logo = () => {
  const theme = useContext(ThemeContext);

  switch (theme.id) {
    case 'gu':
      return <GuLogo />;
    case 'iman':
      return <ImanLogo />;
    default:
      return <NibLogo />;
  }
};

Note: If you're using a named import, it won't be mode-aware by default. You'll need to explicitly set the desired color and variation to match your application's requirements.

Default import

For applications that support multiple brands or themes, use the default Logo component. It dynamically renders the correct logo based on the current theme or context.

jsx

import Logo from '@nib-components/logo';

Interactive demo

jsx

<Logo size="small" />

Props

Prop	Type	Default	Description
`size`	string	`small`	Sets the size (height) of the logo. Must be one of `'small'`, `'medium'` or `'large'`. Width is calculated programmatically, according to a set aspect ratio. Height values are set via design-tokens, and according to respective brand guidelines.
`variation`	string		Overrides the default logo variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens.
`color`	string		Overrides the default color variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens.

Supported color & variation

Brand	Variation	Color
aami	default	monoLight, default
aanz	default	onBrand, default
apia	default	monoLight, default
australianSeniors	default	onDark, default
cota	default	onBrand, default
edi	default	onBrand, default
foundation	default, stacked	default, brightGreen
gu	default	onDark, default
iman	default	onDark, default
ing	default	onBrand, default
nib	default	default, brightGreen
nsi	default	onDark, default
priceline	default	onBrand, default
qantas	default, reduced	onDark, default
real	default	onDark, default
suncorp	default	onDark, default
tid	default	onBrand, onDark, default
worldNomads	default, stacked, sanchez	onDark, default
orbitProtect	default	onDark, default

This page is for information about our Logo component and its usage. For general information about branding at nib as well as downloadable logo packs for print and screen, please see the Logos page.

Theme

Edit this page