React Components

# Link

## Overview

---

## Anatomy

---

Link

---

[Link](https://www.ovhcloud.com)

## Link

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [a attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#attributes) . |
| 
as

 | `<T>` | - | `'a'` | Pass a component you may want to use as custom Link component. Useful for example when using routing library like react-router. |
| 

disabled

 | `boolean` | - | `false` | Whether the component is disabled. |

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-link-column-gap | var(--ods-theme-column-gap) | 
 |
| --ods-link-row-gap | var(--ods-theme-row-gap) | 

 |

## Examples

---

### Default

[Default Link](https://www.ovhcloud.com)

```jsx
{
  globals: {
    imports: `import { Link } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Link href="https://www.ovhcloud.com">
      Default Link    </Link>
}
```

### Disabled

```jsx
{
  globals: {
    imports: `import { Link } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Link disabled href="https://www.ovhcloud.com">
      Disabled    </Link>
}
```

### With Icon

```jsx
{
  decorators: [story => <div style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr'
  }}>{story()}</div>],
  globals: {
    imports: `import { ICON_NAME, Icon, Link } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Link href="https://www.ovhcloud.com">
        <Icon name={ICON_NAME.arrowLeft} />Icon Link
      </Link>
      <Link href="https://www.ovhcloud.com" style={{
      justifySelf: 'right'
    }}>
        Icon Link<Icon name={ICON_NAME.arrowRight} />
      </Link>
    </>
}
```

### React Router integration

Using the `as` attribute, you can use the **Link** component with external libraries like [React Router](https://reactrouter.com/) .

```typescript
import { Link as OdsLink } from '@ovhcloud/ods-react';
import { Link as RouterLink } from 'react-router-dom';
const Link = ({ children, route }) => {
  return (
    <OdsLink
      as={ RouterLink }
      to={ route }>
      { children }
    </OdsLink>
  );
};
export { Link };
```

## Recipes

---

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Feature List Product Card

WEB HOSTING

NewBest seller

Performance

For demanding online stores and projects.

1 vCore 2,4 GHz, 2 Go RAM1 vCore 2,4 GHz, 4 Go RAM2 vCores 2,4 GHz, 8 Go RAM

From

€24.46ex. VAT/month

or €13.19 incl. VAT/monthfor a 24-month registration

Minimum 2-year registration €100 free with a 5-year registration

Installation fee:Free

-   -   Unlimited websites
        
    -   High power level
        
    -   1 domain name free for the first
        
    -   500 GB SSD storage
        
    -   1,000 email addresses
        
-   1-click CMS
    
    -   WordPress
        
    -   Joomla!
        
    -   Drupal
        
    -   Prestashop
        
-   Database
    
    -   4 x 1 GB databases
        
    -   8 GB Web Cloud Databases
        
-   Security
    
    -   Unlimited free SSL
        
    -   Anti-DDoS protection
        
    -   Anti-virus and anti-spam
        
    -   Daily backups
        
-   Performance
    
    -   99.9% observed availability
        
    -   Guaranteed resources
        
    -   Unlimited traffic
        
    -   Service continuity
        
    -   Boost option to withstand temporary traffic spikes
        
-   Support and additional services
    
    -   Git
        
    -   Standard support
        
    -   SSH access
        
    -   CDN Basic
        

Media Product Card

AI Deploy

Easily deploy machine learning models and applications into production, create your API access points with ease, and make effective predictions.