Logo
A logo is a visual representation of a brand or app. It can be a word, an image, or a combination of both.Installation
| Install | yarn add @atlaskit/logo |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/logo, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
iconColor and textColor. The appearance prop should be used instead.| Description | Choice of logo appearance between 3 brand-approved color combinations that will be hooked up to design tokens and theming. |
|---|---|
| Type | "brand" | "neutral" | "inverse" |
| Description | {@link https://hello.atlassian.net/browse/ENGHEALTH-172 Internal documentation for deprecation (no external access)} CSS color to be applied to the non-gradient icon portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the |
|---|---|
| Default | defaultLogoParams.iconColor |
| Type | string |
| Description | Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo). |
|---|---|
| Default | "Atlassian" |
| Type | string |
| Description | The size of the icon. Defaults to "medium". |
|---|---|
| Default | defaultLogoParams.size |
| Type | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" |
| Description | A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.
|
|---|---|
| Type | string |
| Description | {@link https://hello.atlassian.net/browse/ENGHEALTH-171 Internal documentation for deprecation (no external access)} CSS color to be applied to the wordmark portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the |
|---|---|
| Default | defaultLogoParams.textColor |
| Type | string |