# Logo
> Logo is a component for visual representation of the brand.

## Import

```js
import { Logo } from '@gemini-suite/vera-react';
```

## Examples

### Icon

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

```jsx
<Flex>
  <Logo label="Logo" product="proAdm" />
</Flex>
```

### Logo with product name

A wordmark is a product branded logo. The wordmark variant should be used when possible. There are two parts to the workmark.
To the left is the product specific icon and to the right is the product name title in text that must be adjusted for the
specific product.

```jsx
<Flex>
  <Logo label="Logo" product="portal" />
  <Heading margin="none" variant="delta">
    Gemini Portal
  </Heading>
</Flex>
```

This is an example showing the icon (Gemini Hydraulics) and the title text updated to the product name. The icon should be
replaced with the correct one, and the title text should reflect the appropriate product name. You can find the available
product logos below.

```jsx
<Flex
  padding="spacingM"
  css={{
    backgroundColor: '$colorNavbar100'
  }}
>
  <Logo label="Logo" product="hydraulics" />
  <Heading margin="none" variant="delta">
    Gemini Hydraulics
  </Heading>
</Flex>
```

### 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 navbar80 colour.

You can find more information about colors <Link href="/tokens/colors">here</Link>.

```jsx
<Flex
  padding="spacingM"
  css={{
    backgroundColor: '$backgroundNeutralContrast',
    color: '$colorNavbar100'
  }}
>
  <Logo label="Logo" product="live" />
  <Heading margin="none" variant="delta">
    Gemini Live
  </Heading>
</Flex>
```

### Sizes

Logo comes in three 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.

```jsx
<Flex flow="row" gap="spacingM">
  <Flex gap="spacingL" wrap="wrap">
    <Logo size="large" product="terrain" />
  </Flex>
  <Flex gap="spacingL" wrap="wrap">
    <Logo size="medium" product="terrain" />
  </Flex>
  <Flex gap="spacingL" wrap="wrap">
    <Logo size="small" product="terrain" />
  </Flex>
</Flex>
```

### Responsive

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

```jsx
<Flex>
  <Logo
    product="communicator"
    size={{
      '@initial': 'small',
      '@mqLargeAndUp': 'medium',
      '@mqXlargeAndUp': 'large'
    }}
  />
  <Heading
    margin="none"
    variant={{
      '@initial': 'epsilon',
      '@mqLargeAndUp': 'delta',
      '@mqXlargeAndUp': 'beta'
    }}
  >
    Gemini Communicator
  </Heading>
</Flex>
```

### Product icons

Use `product` prop to render a specific product icon.

```jsx
<Flex>
  <Logo product="communicator" />
  <Logo product="va" />
  <Logo product="contractorPortal" />
  <Logo product="hydraulics" />
  <Logo product="live" />
  <Logo product="metrix" />
  <Logo product="notify" />
  <Logo product="portalCloud" />
  <Logo product="portal" />
  <Logo product="privat" />
  <Logo product="proAdm" />
  <Logo product="quantiFlow" />
  <Logo product="siteFlow" />
  <Logo product="terrain" />
  <Logo product="connected" />
</Flex>
```

```jsx
<Flex
  padding="spacingM"
  css={{
    backgroundColor: '$backgroundNeutralContrast',
    color: '$colorNavbar80'
  }}
>
  <Logo product="communicator" />
  <Logo product="va" />
  <Logo product="contractorPortal" />
  <Logo product="hydraulics" />
  <Logo product="live" />
  <Logo product="metrix" />
  <Logo product="notify" />
  <Logo product="portalCloud" />
  <Logo product="portal" />
  <Logo product="privat" />
  <Logo product="proAdm" />
  <Logo product="quantiFlow" />
  <Logo product="siteFlow" />
  <Logo product="terrain" />
  <Logo product="connected" />
</Flex>
```

---

## API Reference

| Name      | Type                                                                                                                                                                                                            | Default    | Description                                                                                                                                                                                                                                                                                  | Required |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`      | `keyof JSX.IntrinsicElements \| React.ComponentType<any>`                                                                                                                                                       | `div`      | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`     | `StitchesCss`                                                                                                                                                                                                   |            | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `label`   | `string`                                                                                                                                                                                                        |            | The `aria-label` of the Logo element to use for screen readers.                                                                                                                                                                                                                              |          |
| `product` | `"communicator" \| "va" \| "contractorPortal" \| "hydraulics" \| "live" \| "metrix" \| "notify" \| "portalCloud" \| "portal" \| "privat" \| "proAdm" \| "quantiFlow" \| "siteFlow" \| "terrain" \| "connected"` |            | The product that the logo refers to.                                                                                                                                                                                                                                                         |          |
| `size`    | `"small" \| "medium" \| "large"`                                                                                                                                                                                | `"medium"` | The size of the logo.                                                                                                                                                                                                                                                                        |          |