Igloo branding

Color

A color can be used in place of an avatar. The background color and text color are customizable.

Installation

To install @igloo-ui/color in your project, you will need to run the following command using npm:

npm install @igloo-ui/color

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/color

Usage

Then to use the component in your code just import it!

import Color from '@igloo-ui/color';

<Color
  color="#FFC3BA"
  textColor="#6B2837"
  size="large"
  name="Awesome Possum Team"
/>;

API

PropTypeDescription
appearance"circular" | "square"The appearance of the color
childrenReactNodeThe content of the color
classNamestringAdd a specific class to the color
colorstringThe background color
dataTeststringAdd a data-test tag for automated tests
namestringSpecify the name that will be used to create initials
sizeSizeSpecifies the size of the color
textColorstringThe color of the text