Skip to main content

Logo

Used to define and position brand/product logo inside a Header.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Logo } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility documentation(opens in new window)

Variants​

Default​

Inherits the brand from the BrandProvider

Dark​

For use on light coloured backgrounds

Light​

For use on dark coloured backgrounds

Appearance​

Brand Specific​

Use the brand prop to define which logo to render. In this example the logo is hardcoded to the nrma brand

Pass in a decimal value as per the transform:scale() css specifications to alter the size of the Logo, the transform-origin is set to 0.

Properties​

Name
Description
  • brand
    stringBrand identifier
  • className
    stringAdditional CSS classes to be applied
  • link
    IlinkConfiguration for linking the Logo
  • variant
    "dark" | "light"Logo variant (optional: "dark" or "light")
  • scale
    numberScale factor for the logo
  • id
    stringHTML id attribute for the component
  • isTesting
    booleanInternal testing flag (not a user-provided prop)

CSS Variables​