Logo

Import#

import { Logo } from '@volue/wave-react';

Examples#

Wordmark (primary logo)#

A wordmark is a brand name styled as a logo, with a nine-faceted circle as the 'O'. The wordmark variant should be used when possible.

Icon#

An icon is a symbol that represents a brand, but does not contain the name of the brand. It should be used in cases where the primary logo is not suitable, for example on small screens or in areas with minimal space.

On dark background#

By default, the wordmark and icon inherit their colors from the parent element. On dark-coloured backgrounds such as backgroundNeutralContrast, logo should appear in inverse colour.

You can find more information about colors usage here.

Sizes#

Logo comes in two sizes, with the medium size used by default. small size can be used in cases when there is limited space available or when rendering more compact layouts.

Responsive#

Logo supports responsive syntax for variant and size property, which means you can change its size based on the viewport.

With product name#

In the header or main navigation area, you may want to combine wordmark with a Heading component that displays product or service name.

API Reference#