# React Components/Logo

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `size` | `` | No | LOGO_SIZE.md | The size preset to use. |
| `variant` | `` | No | LOGO_VARIANT.default | The variant preset to use. |


## Examples


### Accessibility Link

```tsx
{
  globals: {
    imports: `import { Logo } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <a aria-label="Return to the OVHcloud home page" href="https://www.ovhcloud.com">
      <Logo />
    </a>
}
```

### Anatomy Tech

```tsx
{
  tags: ['!dev'],
  render: ({}) => <div data-ods="logo-story">
      <Logo />
    </div>
}
```

### Default

```tsx
{
  globals: {
    imports: `import { Logo } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Logo />
}
```

### Demo

```tsx
{
  argTypes: orderControls({
    size: {
      table: {
        category: CONTROL_CATEGORY.design,
        type: {
          summary: 'LOGO_SIZE'
        }
      },
      control: {
        type: 'select'
      },
      options: LOGO_SIZES
    },
    variant: {
      table: {
        category: CONTROL_CATEGORY.design,
        type: {
          summary: 'LOGO_VARIANT'
        }
      },
      control: {
        type: 'select'
      },
      options: LOGO_VARIANTS
    }
  })
}
```

### Overview

```tsx
{
  tags: ['!dev'],
  parameters: {
    layout: 'centered'
  },
  render: ({}) => <Logo />
}
```

### Size

```tsx
{
  decorators: [story => <div style={{
    display: 'grid',
    rowGap: '16px'
  }}>{story()}</div>],
  globals: {
    imports: `import { LOGO_SIZE, Logo } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Logo size={LOGO_SIZE.sm} />
      <Logo size={LOGO_SIZE.md} />
      <Logo size={LOGO_SIZE.lg} />
    </>
}
```

### Theme Generator

```tsx
{
  parameters: {
    layout: 'fullscreen'
  },
  tags: ['!dev'],
  render: ({}) => <Logo />
}
```

### Variant

```tsx
{
  decorators: [story => <div style={{
    display: 'grid',
    rowGap: '16px'
  }}>{story()}</div>],
  globals: {
    imports: `import { LOGO_VARIANT, Logo } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Logo variant={LOGO_VARIANT.default} />
      <Logo variant={LOGO_VARIANT.emblem} />
    </>
}
```