React Components

# Button

## Overview

---

## Anatomy

---

Button

---

## Button

---

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

 | `BUTTON_COLOR` | - | `BUTTON_COLOR.primary` | The color preset to use. |
| 

loading

 | `boolean` | - | `false` | Whether the component is in loading state, disabling it. |
| 

size

 | `BUTTON_SIZE` | - | `BUTTON_SIZE.md` | The size preset to use. |
| 

variant

 | `BUTTON_VARIANT` | - | `BUTTON_VARIANT.default` | The variant preset to use. |

## Enums

---

### BUTTON_COLOR

-   critical =`"critical"`
-   information =`"information"`
-   neutral =`"neutral"`
-   primary =`"primary"`
-   success =`"success"`
-   warning =`"warning"`

### BUTTON_SIZE

-   md =`"md"`
-   sm =`"sm"`
-   xs =`"xs"`

### BUTTON_VARIANT

-   default =`"default"`
-   ghost =`"ghost"`
-   outline =`"outline"`

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-button-background-color-critical | var(--ods-color-critical-500) | 
 |
| --ods-button-background-color-critical-active | var(--ods-color-critical-800) | 

 |
| --ods-button-background-color-critical-ghost | inherit | 

 |
| --ods-button-background-color-critical-ghost-active | var(--ods-color-critical-200) | 

 |
| --ods-button-background-color-critical-ghost-hover | var(--ods-color-critical-100) | 

 |
| --ods-button-background-color-critical-hover | var(--ods-color-critical-700) | 

 |
| --ods-button-background-color-critical-outline | var(--ods-color-critical-000) | 

 |
| --ods-button-background-color-critical-outline-active | var(--ods-color-critical-200) | 

 |
| --ods-button-background-color-critical-outline-hover | var(--ods-color-critical-100) | 

 |
| --ods-button-background-color-information | var(--ods-color-information-100) | 

 |
| --ods-button-background-color-information-active | var(--ods-color-information-300) | 

 |
| --ods-button-background-color-information-ghost | inherit | 

 |
| --ods-button-background-color-information-ghost-active | var(--ods-color-information-200) | 

 |
| --ods-button-background-color-information-ghost-hover | var(--ods-color-information-100) | 

 |
| --ods-button-background-color-information-hover | var(--ods-color-information-200) | 

 |
| --ods-button-background-color-information-outline | var(--ods-color-information-000) | 

 |
| --ods-button-background-color-information-outline-active | var(--ods-color-information-200) | 

 |
| --ods-button-background-color-information-outline-hover | var(--ods-color-information-100) | 

 |
| --ods-button-background-color-neutral | var(--ods-color-neutral-600) | 

 |
| --ods-button-background-color-neutral-active | var(--ods-color-neutral-800) | 

 |
| --ods-button-background-color-neutral-ghost | inherit | 

 |
| --ods-button-background-color-neutral-ghost-active | var(--ods-color-neutral-200) | 

 |
| --ods-button-background-color-neutral-ghost-hover | var(--ods-color-neutral-100) | 

 |
| --ods-button-background-color-neutral-hover | var(--ods-color-neutral-700) | 

 |
| --ods-button-background-color-neutral-outline | var(--ods-color-neutral-000) | 

 |
| --ods-button-background-color-neutral-outline-active | var(--ods-color-neutral-200) | 

 |
| --ods-button-background-color-neutral-outline-hover | var(--ods-color-neutral-100) | 

 |
| --ods-button-background-color-primary | var(--ods-color-primary-500) | 

 |
| --ods-button-background-color-primary-active | var(--ods-color-primary-800) | 

 |
| --ods-button-background-color-primary-ghost | inherit | 

 |
| --ods-button-background-color-primary-ghost-active | var(--ods-color-primary-200) | 

 |
| --ods-button-background-color-primary-ghost-hover | var(--ods-color-primary-100) | 

 |
| --ods-button-background-color-primary-hover | var(--ods-color-primary-700) | 

 |
| --ods-button-background-color-primary-outline | var(--ods-color-primary-000) | 

 |
| --ods-button-background-color-primary-outline-active | var(--ods-color-primary-200) | 

 |
| --ods-button-background-color-primary-outline-hover | var(--ods-color-primary-100) | 

 |
| --ods-button-background-color-success | var(--ods-color-success-500) | 

 |
| --ods-button-background-color-success-active | var(--ods-color-success-800) | 

 |
| --ods-button-background-color-success-ghost | inherit | 

 |
| --ods-button-background-color-success-ghost-active | var(--ods-color-success-200) | 

 |
| --ods-button-background-color-success-ghost-hover | var(--ods-color-success-100) | 

 |
| --ods-button-background-color-success-hover | var(--ods-color-success-700) | 

 |
| --ods-button-background-color-success-outline | var(--ods-color-success-000) | 

 |
| --ods-button-background-color-success-outline-active | var(--ods-color-success-200) | 

 |
| --ods-button-background-color-success-outline-hover | var(--ods-color-success-100) | 

 |
| --ods-button-background-color-warning | var(--ods-color-warning-400) | 

 |
| --ods-button-background-color-warning-active | var(--ods-color-warning-600) | 

 |
| --ods-button-background-color-warning-ghost | inherit | 

 |
| --ods-button-background-color-warning-ghost-active | var(--ods-color-warning-200) | 

 |
| --ods-button-background-color-warning-ghost-hover | var(--ods-color-warning-100) | 

 |
| --ods-button-background-color-warning-hover | var(--ods-color-warning-500) | 

 |
| --ods-button-background-color-warning-outline | var(--ods-color-warning-000) | 

 |
| --ods-button-background-color-warning-outline-active | var(--ods-color-warning-200) | 

 |
| --ods-button-background-color-warning-outline-hover | var(--ods-color-warning-100) | 

 |
| --ods-button-border-color-critical | var(--ods-color-critical-500) | 

 |
| --ods-button-border-color-critical-active | var(--ods-color-critical-800) | 

 |
| --ods-button-border-color-critical-ghost | unset | 

 |
| --ods-button-border-color-critical-ghost-active | unset | 

 |
| --ods-button-border-color-critical-ghost-hover | unset | 

 |
| --ods-button-border-color-critical-hover | var(--ods-color-critical-700) | 

 |
| --ods-button-border-color-critical-outline | var(--ods-color-critical-500) | 

 |
| --ods-button-border-color-critical-outline-active | var(--ods-color-critical-800) | 

 |
| --ods-button-border-color-critical-outline-hover | var(--ods-color-critical-700) | 

 |
| --ods-button-border-color-information | var(--ods-color-information-100) | 

 |
| --ods-button-border-color-information-active | var(--ods-color-information-300) | 

 |
| --ods-button-border-color-information-ghost | unset | 

 |
| --ods-button-border-color-information-ghost-active | unset | 

 |
| --ods-button-border-color-information-ghost-hover | unset | 

 |
| --ods-button-border-color-information-hover | var(--ods-color-information-200) | 

 |
| --ods-button-border-color-information-outline | var(--ods-color-information-500) | 

 |
| --ods-button-border-color-information-outline-active | var(--ods-color-information-800) | 

 |
| --ods-button-border-color-information-outline-hover | var(--ods-color-information-700) | 

 |
| --ods-button-border-color-neutral | var(--ods-color-neutral-600) | 

 |
| --ods-button-border-color-neutral-active | var(--ods-color-neutral-800) | 

 |
| --ods-button-border-color-neutral-ghost | unset | 

 |
| --ods-button-border-color-neutral-ghost-active | unset | 

 |
| --ods-button-border-color-neutral-ghost-hover | unset | 

 |
| --ods-button-border-color-neutral-hover | var(--ods-color-neutral-700) | 

 |
| --ods-button-border-color-neutral-outline | var(--ods-color-neutral-600) | 

 |
| --ods-button-border-color-neutral-outline-active | var(--ods-color-neutral-800) | 

 |
| --ods-button-border-color-neutral-outline-hover | var(--ods-color-neutral-700) | 

 |
| --ods-button-border-color-primary | var(--ods-color-primary-500) | 

 |
| --ods-button-border-color-primary-active | var(--ods-color-primary-800) | 

 |
| --ods-button-border-color-primary-ghost | unset | 

 |
| --ods-button-border-color-primary-ghost-active | unset | 

 |
| --ods-button-border-color-primary-ghost-hover | unset | 

 |
| --ods-button-border-color-primary-hover | var(--ods-color-primary-700) | 

 |
| --ods-button-border-color-primary-outline | var(--ods-color-primary-500) | 

 |
| --ods-button-border-color-primary-outline-active | var(--ods-color-primary-800) | 

 |
| --ods-button-border-color-primary-outline-hover | var(--ods-color-primary-700) | 

 |
| --ods-button-border-color-success | var(--ods-color-success-500) | 

 |
| --ods-button-border-color-success-active | var(--ods-color-success-800) | 

 |
| --ods-button-border-color-success-ghost | unset | 

 |
| --ods-button-border-color-success-ghost-active | unset | 

 |
| --ods-button-border-color-success-ghost-hover | unset | 

 |
| --ods-button-border-color-success-hover | var(--ods-color-success-700) | 

 |
| --ods-button-border-color-success-outline | var(--ods-color-success-500) | 

 |
| --ods-button-border-color-success-outline-active | var(--ods-color-success-800) | 

 |
| --ods-button-border-color-success-outline-hover | var(--ods-color-success-700) | 

 |
| --ods-button-border-color-warning | var(--ods-color-warning-400) | 

 |
| --ods-button-border-color-warning-active | var(--ods-color-warning-600) | 

 |
| --ods-button-border-color-warning-ghost | unset | 

 |
| --ods-button-border-color-warning-ghost-active | unset | 

 |
| --ods-button-border-color-warning-ghost-hover | unset | 

 |
| --ods-button-border-color-warning-hover | var(--ods-color-warning-500) | 

 |
| --ods-button-border-color-warning-outline | var(--ods-color-warning-700) | 

 |
| --ods-button-border-color-warning-outline-active | var(--ods-color-warning-900) | 

 |
| --ods-button-border-color-warning-outline-hover | var(--ods-color-warning-800) | 

 |
| --ods-button-border-radius-md | var(--ods-theme-border-radius) | 

 |
| --ods-button-border-radius-sm | calc(var(--ods-theme-border-radius) / 2) | 

 |
| --ods-button-border-radius-width | var(--ods-theme-border-width) | 

 |
| --ods-button-border-radius-xs | calc(var(--ods-theme-border-radius) / 4) | 

 |
| --ods-button-column-gap-md | var(--ods-theme-column-gap) | 

 |
| --ods-button-column-gap-sm | calc(var(--ods-theme-column-gap) * 0.75) | 

 |
| --ods-button-column-gap-xs | calc(var(--ods-theme-column-gap) * 0.75) | 

 |
| --ods-button-padding-horizontal-md | var(--ods-theme-padding-horizontal) | 

 |
| --ods-button-padding-horizontal-sm | calc(var(--ods-theme-padding-horizontal) * 0.75) | 

 |
| --ods-button-padding-horizontal-xs | calc(var(--ods-theme-padding-horizontal) * 0.75) | 

 |
| --ods-button-padding-vertical-md | var(--ods-theme-padding-vertical) | 

 |
| --ods-button-padding-vertical-sm | calc(var(--ods-theme-padding-vertical) * 0.75) | 

 |
| --ods-button-padding-vertical-xs | calc(var(--ods-theme-padding-vertical) * 0.75) | 

 |
| --ods-button-text-color-critical | var(--ods-color-critical-000) | 

 |
| --ods-button-text-color-critical-active | var(--ods-color-critical-000) | 

 |
| --ods-button-text-color-critical-ghost | var(--ods-color-critical-500) | 

 |
| --ods-button-text-color-critical-ghost-active | var(--ods-color-critical-800) | 

 |
| --ods-button-text-color-critical-ghost-hover | var(--ods-color-critical-700) | 

 |
| --ods-button-text-color-critical-hover | var(--ods-color-critical-000) | 

 |
| --ods-button-text-color-critical-outline | var(--ods-color-critical-500) | 

 |
| --ods-button-text-color-critical-outline-active | var(--ods-color-critical-800) | 

 |
| --ods-button-text-color-critical-outline-hover | var(--ods-color-critical-700) | 

 |
| --ods-button-text-color-information | var(--ods-color-information-700) | 

 |
| --ods-button-text-color-information-active | var(--ods-color-information-700) | 

 |
| --ods-button-text-color-information-ghost | var(--ods-color-information-500) | 

 |
| --ods-button-text-color-information-ghost-active | var(--ods-color-information-800) | 

 |
| --ods-button-text-color-information-ghost-hover | var(--ods-color-information-700) | 

 |
| --ods-button-text-color-information-hover | var(--ods-color-information-700) | 

 |
| --ods-button-text-color-information-outline | var(--ods-color-information-500) | 

 |
| --ods-button-text-color-information-outline-active | var(--ods-color-information-800) | 

 |
| --ods-button-text-color-information-outline-hover | var(--ods-color-information-700) | 

 |
| --ods-button-text-color-neutral | var(--ods-color-neutral-000) | 

 |
| --ods-button-text-color-neutral-active | var(--ods-color-neutral-000) | 

 |
| --ods-button-text-color-neutral-ghost | var(--ods-color-neutral-600) | 

 |
| --ods-button-text-color-neutral-ghost-active | var(--ods-color-neutral-800) | 

 |
| --ods-button-text-color-neutral-ghost-hover | var(--ods-color-neutral-700) | 

 |
| --ods-button-text-color-neutral-hover | var(--ods-color-neutral-000) | 

 |
| --ods-button-text-color-neutral-outline | var(--ods-color-neutral-600) | 

 |
| --ods-button-text-color-neutral-outline-active | var(--ods-color-neutral-800) | 

 |
| --ods-button-text-color-neutral-outline-hover | var(--ods-color-neutral-700) | 

 |
| --ods-button-text-color-primary | var(--ods-color-primary-000) | 

 |
| --ods-button-text-color-primary-active | var(--ods-color-primary-000) | 

 |
| --ods-button-text-color-primary-ghost | var(--ods-color-primary-500) | 

 |
| --ods-button-text-color-primary-ghost-active | var(--ods-color-primary-800) | 

 |
| --ods-button-text-color-primary-ghost-hover | var(--ods-color-primary-700) | 

 |
| --ods-button-text-color-primary-hover | var(--ods-color-primary-000) | 

 |
| --ods-button-text-color-primary-outline | var(--ods-color-primary-500) | 

 |
| --ods-button-text-color-primary-outline-active | var(--ods-color-primary-800) | 

 |
| --ods-button-text-color-primary-outline-hover | var(--ods-color-primary-700) | 

 |
| --ods-button-text-color-success | var(--ods-color-success-000) | 

 |
| --ods-button-text-color-success-active | var(--ods-color-success-000) | 

 |
| --ods-button-text-color-success-ghost | var(--ods-color-success-500) | 

 |
| --ods-button-text-color-success-ghost-active | var(--ods-color-success-800) | 

 |
| --ods-button-text-color-success-ghost-hover | var(--ods-color-success-700) | 

 |
| --ods-button-text-color-success-hover | var(--ods-color-success-000) | 

 |
| --ods-button-text-color-success-outline | var(--ods-color-success-500) | 

 |
| --ods-button-text-color-success-outline-active | var(--ods-color-success-800) | 

 |
| --ods-button-text-color-success-outline-hover | var(--ods-color-success-700) | 

 |
| --ods-button-text-color-warning | var(--ods-color-warning-900) | 

 |
| --ods-button-text-color-warning-active | var(--ods-color-warning-900) | 

 |
| --ods-button-text-color-warning-ghost | var(--ods-color-warning-700) | 

 |
| --ods-button-text-color-warning-ghost-active | var(--ods-color-warning-900) | 

 |
| --ods-button-text-color-warning-ghost-hover | var(--ods-color-warning-800) | 

 |
| --ods-button-text-color-warning-hover | var(--ods-color-warning-900) | 

 |
| --ods-button-text-color-warning-outline | var(--ods-color-warning-700) | 

 |
| --ods-button-text-color-warning-outline-active | var(--ods-color-warning-900) | 

 |
| --ods-button-text-color-warning-outline-hover | var(--ods-color-warning-800) | 

 |

## Examples

---

### Default

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

### Color

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'row',
    gap: '8px',
    alignItems: 'center'
  }}>{story()}</div>],
  globals: {
    imports: `import { BUTTON_COLOR, Button } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Button color={BUTTON_COLOR.critical}>Critical</Button>
      <Button color={BUTTON_COLOR.information}>Information</Button>
      <Button color={BUTTON_COLOR.neutral}>Neutral</Button>
      <Button color={BUTTON_COLOR.primary}>Primary</Button>
      <Button color={BUTTON_COLOR.success}>Success</Button>
      <Button color={BUTTON_COLOR.warning}>Warning</Button>
    </>
}
```

### Loading

```jsx
{
  globals: {
    imports: `import { Button } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Button loading={true}>
      Loading button    </Button>
}
```

### Size

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'row',
    gap: '8px',
    alignItems: 'center'
  }}>{story()}</div>],
  globals: {
    imports: `import { BUTTON_SIZE, Button } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Button size={BUTTON_SIZE.md}>MD button</Button>
      <Button size={BUTTON_SIZE.sm}>SM button</Button>
      <Button size={BUTTON_SIZE.xs}>XS button</Button>
    </>
}
```

### Variant

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'row',
    gap: '8px',
    alignItems: 'center'
  }}>{story()}</div>],
  globals: {
    imports: `import { BUTTON_VARIANT, Button } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Button variant={BUTTON_VARIANT.default}>Default button</Button>
      <Button variant={BUTTON_VARIANT.outline}>Outline button</Button>
      <Button variant={BUTTON_VARIANT.ghost}>Ghost button</Button>
    </>
}
```

## Recipes

---

Chat

Assistant2:58 PM

Welcome to the Chat recipe. Feel free to test the UI behavior by typing anything on your mind below.

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Data Grid

| 
 | 

First Name

 | 

Last Name

 | 

Age

 | 

IP Address

 | 

Actions

 |
| --- | --- | --- | --- | --- | --- |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |

102550100300

of 0 results

Status Message

Activate your project and get €200 in free cloud credit

You are currently in discovery mode. Activate your project to unlock your cloud resources and start building in minutes.

Status Modal