Components listing - Docs

Feel free to explore this page in your markdown editor (/docs/components/docs.mdx) to see how the components were used, or in MDX content files that already use MDX components.

MDX components are useful for adding rich content and interactions within your contributions.

There are two types of components:

• Native (or native-extended) markdown style
• Tag style (some kind of html tag)

CodeLink to this anchor

🧩  This component uses a native-extended Markdown style.

Use a triple backquote character ``` to enclose text

You can specify the language of the code. A list of languages can be found here.

Component examples

this is a block of code

The following example uses the JSX language, i.e. ```jsx:

import React, { useState } from 'react'
function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

With bash script, i.e ```bash

WEEK=`date '+%W'`    	# The week of the year (0..53).
WEEK=${WEEK#0}       	# Remove possible leading zero.
let "INDEX = $WEEK % $COUNT"   # week modulo count = the lucky person
COMPAGNON=${COMPAGNONS_LIST[INDEX]}     # Get the lucky person's e-mail address.

With no language, i.e. ```

server {
  listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8;
  server_name site2.tld;
  root /var/www/site2;
  index index.html;
  location / {
    try_files $uri $uri/ =404;
  }
}

ConceptLink to this anchor

🧩  This component uses a Tag style.

Component example #1

The first child has to be an h2

Component example #2

Concept with MDX

Concept with MDX

server {
  root /var/www/site2;
  index index.html;
  location / {
    try_files $uri $uri/ =404;
  }
}

Note

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Code example

<Concept>
  ## The first child has to be an `h2`
  You can use simple text and even MDX components here like Message, Lightbox, Code, etc
</Concept>

Definition listLink to this anchor

🧩  This component uses a native-extended Markdown style.

• List items should be separated with a line break.
• If you want to include two separate definition lists, there must be a line of text separating them. Otherwise, the lists will be stuck together.

Random text to separate the lists. It can be a title or inline code.

Code example

Description
: Indicates whether this bucket has an Object Lock configuration enabled
Type
: String
Valid Values
: `Enabled`
Required
: Yes

HeadingsLink to this anchor

🧩  This component uses a Native Markdown style.

H1 title

Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat. Proident in ullamco eiusmod veniam quis non qui minim elit veniam ullamco eu. Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor anim deserunt deserunt laboris.

H2 titleLink to this anchor

Eu minim consectetur pariatur deserunt est esse anim ullamco do deserunt consequat sit irure. Esse aute adipisicing ullamco non eu ex ut dolore incididunt veniam aliqua est. Ea ex laboris eiusmod eiusmod ut. Ipsum veniam officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit deserunt elit duis.

H3 titleLink to this anchor

Do enim nisi laborum aliqua magna anim magna officia velit. Excepteur minim nostrud in laboris incididunt cillum consectetur laborum sit. Eu cillum sit irure excepteur. Voluptate aute fugiat ullamco sint ullamco laborum voluptate deserunt incididunt in mollit enim. Quis nisi laborum id nulla nisi amet est.

H4 title

Deserunt id culpa aliqua exercitation exercitation officia amet ea ea. Sit aliqua tempor Lorem incididunt amet elit dolor. Ullamco commodo nisi ullamco adipisicing officia nisi. Nulla amet nostrud minim cupidatat aute labore.

H5 title

Cillum cupidatat aute Lorem amet laborum cillum occaecat adipisicing excepteur. Nisi proident reprehenderit proident veniam nisi sit eu anim deserunt Lorem irure pariatur ad incididunt. Esse commodo officia elit id aliquip dolore commodo. Lorem amet labore in consectetur laborum cillum tempor mollit anim laboris velit aute do. Ex sunt elit irure deserunt laboris ullamco amet Lorem amet tempor deserunt qui.

H6 title

Nulla labore qui aliqua minim adipisicing. Ut irure Lorem consectetur incididunt reprehenderit veniam id duis mollit. Consectetur ullamco Lorem excepteur magna sit excepteur duis nisi aliqua veniam cupidatat enim. Aute eiusmod duis enim non adipisicing incididunt enim aute laborum proident. Ea nulla sit laborum consectetur laborum minim tempor cillum do sunt deserunt laborum. Velit laborum deserunt laborum eiusmod qui dolore enim irure laborum deserunt enim nostrud cillum Lorem.

Code example

## Heading title level 2
Lorem ipsum
### Heading title level 3
Lorem ipsum
#### Heading title level 4
Lorem ipsum
##### Heading title level 5
Lorem ipsum
###### Heading title level 6
Lorem ipsum

Inline CodeLink to this anchor

🧩  This component uses a Native Markdown style.

To use code style in the middle of text lines, enclose the text with a single backquote (`) character

Hello, I'm inline code. Call the function getMoreLove(). This is my IP address: 192.168.1.1.

Code example

…this is a normal inline text using single quotes `192.168.0.1` for IP.

…this is a normal inline text using single quotes 192.168.0.1 for IP.

Inline Console iconsLink to this anchor

🧩  This component uses a Tag style.

Inline Console icons are used in the text. They are the same as the Scaleway Console icons.

• The MDX is a TAG named Icon
• Mandatory ‘name’ attribute is used with keys

Keys are:

• assistance,
• delete,
• download,
• cancel,
• edit,
• glacier,
• more,
• plus,
• toggle,
• unlink,
• validate,

Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat «Validate Icon». Proident in ullamco eiusmod «Edit Icon» veniam quis non qui minim elit veniam ullamco eu «Download Icon». Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor «Cancel Icon» anim deserunt deserunt laboris.

Eu minim consectetur «See more Icon» pariatur deserunt est esse anim ullamco do deserunt consequat sit irure «Assistance Icon». Esse aute adipisicing «Delete Icon» ullamco non eu ex ut dolore incididunt veniam «Plus Icon» aliqua est. Ea ex laboris eiusmod «Toogle Icon» eiusmod ut. Ipsum veniam «Object to Glacier Icon» officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit «Unlink Icon» deserunt elit duis.

Code example

…this is a normal inline text <Icon name="toggle" /> with an icon.

ImagesLink to this anchor

🧩  This component uses a Native Markdown OR a Tag style.

Code example

// Native Markdown
![MD basic image maker](https://placekitten.com/300/200)
// HTML Tag
<img src="https://placekitten.com/800/500" />

LightboxLink to this anchor

🧩  This component uses a Tag style.

Props: src (mandatory):

<Lightbox src="icon.webp" />

Different size (by default medium):Link to this anchor

Props: size="[small|medium|large]"

Small:

Medium:

Large:

Can be groupedLink to this anchor

With 2 small images:

<Lightbox src={["icon.webp","miam.webp"]} size={"small"}  alt={["icon","Cupcake Scaleway"]} />

With 2 medium images:

<Lightbox src={["icon.webp","miam.webp"]} size={"medium"}  alt={["icon","Cupcake Scaleway"]} />

With 3 small images:

<Lightbox src={["icon.webp","miam.webp","first-scaleway-chip.webp"]} size={"small"}  alt={["icon","Cupcake Scaleway","chips"]} />

Can handle .gifLink to this anchor

<Lightbox src="scaleway-flex-drag.gif" alt="" />
<Lightbox src={["icon.webp", "scaleway-flex-drag.gif"]} alt="" />

About accessibilityLink to this anchor

With Prop alt (optional):

<Lightbox src="miam.webp" alt="Cupcake Scaleway" />

With prop longdesc (optional):

<Lightbox src="elements-create-account.webp" alt="Create Account form" longdesc="Log-in panel for Elements product console. The form contain a toggle to choose if it is a personal or corporate account. Then firstname and lastname inputs, then an email input. Below there is a checkbox to receive marketing emails. Finally a Captcha and a submit button." />

LinkLink to this anchor

🧩  This component uses a Native Markdown OR a Tag style.

• Internal
  • <Link /> Tag component: Tutorials

      <Link to="/tutorials">Tutorials</Link>
    

  • []() Native syntax: Tutorials

      [Tutorials](/tutorials)
    

  • []() PDF: Latest changes of the week (PDF, 75.65KB)

      <!-- .pdf extension is self detected -->
      [Latest changes of the week](new-changes.pdf)
    

• External
  • <Link /> Tag component: Console Scaleway

      <Link to="https://console.scaleway.com">Console Scaleway</Link>
    

  • []() Native syntax: Tutorials

      [Tutorials](https://console.scaleway.com)
    

ListsLink to this anchor

🧩  This component uses a Native Markdown style.

Ordered listLink to this anchor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

1. First
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   
3. Third
4. fourth
5. fifth

   1. First
   2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
       <Lightbox src="miam.webp" />
   3. Third
   4. fourth
       ![simple image in list](https://placekitten.com/1000/460)
   5. fifth
   

Unordered listLink to this anchor

• First
  • First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  • First
• Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
• Third

- First
  - First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  - First
- Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- Third

Ordered list with a new lineLink to this anchor

1. List number 1

   New line, still in number 1

2. List number 2 with code block inside

     server {
       listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8;
       server_name site2.tld;
       root /var/www/site2;
       index index.html;
       location / {
         try_files $uri $uri/ =404;
       }
     }
   

   I don’t know mnI don’t know mnI don’t know mnI don’t know mn

3. List number 3 here

Nested listsLink to this anchor

1. Click Instances in the Compute section of the side menu. The Instance creation page displays.

2. Click the Create an Instance button. The Instance creation wizard displays:

3. You can now make those steps

   • Choose an Availability Zone, which is the geographical region where your instance will be deployed
     • under
     • line
   • Choose an Image to run on your instance. This can be an operating system, an InstantApp or a custom image.
   • Choose an Instance type. Different instance types have different prices, processing power, memory, SSD disks and bandwidth.
   • Add Volumes. This is an optional step. You can leave the default settings for storage, or choose to add more block or local storage to your instance.
   • Enter a Name for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances.
   • Click Advanced Options if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration.
   • Verify the SSH Keys that will be give you access to your Instance
   • Verify the Estimated Cost of your instance, based on the specifications you chose.

4. Click Create a new instance to finish. The creation of your instance is started, and you are informed when the instance is ready.

5. Complete the following information:

   • Frontend rules include:
     • Frontend rule name
     • Port
     • SSL Certificate
   • Backend rules include:
     • Backend rule name
     • Protocol: TCP or HTTP
     • Port
     • Proxy
     • Health check type
     • Sticky session
     • Server IP
       Note

       You can also use an existing backend. To do so, click Use an existing Backend and select the backend of your choice from the dropdown list.

6. Click Create Frontend Code example

   1. Click **Instances** in the **Compute** section of the side menu. The Instance creation page displays.
   2. Click the **Create an Instance** button. The Instance creation wizard displays:
   3. You can now make those steps
       - Choose an **Availability Zone**, which is the geographical region where your instance will be deployed
         - under
         - line
       - Choose an **Image** to run on your instance. This can be an operating system, an InstantApp or a custom image.
       - Choose an **Instance type**. Different instance types have different prices, processing power, memory, SSD disks and bandwidth.
       - Add **Volumes**. This is an optional step. You can leave the default settings for storage, or choose to add more [block](link) or [local](link) storage to your instance.
       - Enter a **Name** for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances.
       - Click **Advanced Options** if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration.
       - Verify the **SSH Keys** that will be give you access to your Instance
       - Verify the **Estimated Cost** of your instance, based on the specifications you chose.
   4. Click **Create a new instance** to finish. The creation of your instance is started, and you are informed when the instance is ready.
   5. Complete the following information:
       - Frontend rules include:
         - Frontend rule name
         - Port
         - SSL Certificate
       - Backend rules include:
         - Backend rule name
         - Protocol: TCP or HTTP
         - Port
         - Proxy
         - Health check type
         - Sticky session
         - Server IP
           <Message type="note">
             You can also use an existing backend.
             To do so, click **Use an existing Backend** and select the backend of your choice from the dropdown list.
           </Message>
   6. Click **Create Frontend**
   

MacroLink to this anchor

🧩  This component uses a Tag style.

A macro is a piece of content written in MDX which can be re-used anywhere.

Public IP addresses are routed on the internet. You can enter the public IP address of your Instance into any browser connected to the Internet, and access content being served from that instance. You can think of public IP addresses like postal addresses for buildings - they are unique, and tell the routers directing traffic through the internet where to find a particular server.

^^^^ The above text come from a macro!

Code example

<Macro id="compute-public-ip" />

MessagesLink to this anchor

🧩  This component uses a Tag style.

⚠️ Note that markdown table inside a Message must not start with a tab.

Code example

<Message type="tip">
  **Lorem** ipsum dolor sit amet, <Icon name="validate"/> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  - First item
  - Second item
    - **Important item**
    - `Some code` <Icon name="delete"/>
</Message>

<Message type="requirement">
| Content Type | Description         | Number |
| ------------ | ------------------- | ------ |
| Hello        | Three columns table | 1      |
| Tutorials    | New concept         | 2      |
  <Message type="important">
    **Lorem** ipsum dolor sit amet, <Icon name="validate"/> consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    <Message type="tip">
      - First item
      - Second item
        - **Important item**
        - `Some code` <Icon name="delete"/>
    </Message>
  </Message>
</Message>

TableLink to this anchor

🧩  This component uses a Native Markdown style.

Code example

| Content Type | Description         | Number |
| ------------ | ------------------- | ------ |
| Hello        | Three columns table | 1      |
| Tutorials    | New concept         | 2      |

TabsLink to this anchor

🧩  This component uses a Tag style.

Component example #1

• Label tab one

• Console Tab
• API Tab
• Tab

curl -H 'X-Auth-Token: $SECRET_KEY' -H 'Content-Type: application/json' \
https://api.scaleway.com/instance/v1/zones/{zone}/servers -d \
'{
  "name": "string",
  "dynamic_ip_required": boolean,
  "commercial_type": "string",
  "image": "string",
  "volumes": {
    "<volumeKey>": {
      "id": "string",
      "boot": boolean,
      "name": "string",
      "size": 300000000000,
      "volume_type": "l_ssd",
      "base_snapshot": "string",
      "organization": "string",
      "project": "string"
    }
  },
  "enable_ipv6": boolean,
  "public_ip": "string",
  "boot_type": "local",
  "bootscript": "string",
  "organization": "string",
  "project": "string",
  "tags": [
    "string"
  ],
  "security_group": "string",
  "placement_group": "string"
}'

curl -H "X-Auth-Token: $SECRET_KEY" -H "Content-Type: application/json" https://api.scaleway.com/instance/v1/zones/fr-par-1/servers -d \
'{
  "name": "my-instance",
  "commercial_type": "GP1-S",
  "image": "881d7a33-4cfa-4046-b5cf-c33cb9c62fb6",
  "boot_type": "local",
  "organization": "3ei11278-827c-4c34-8111-0c2576ed921f",
  "tags": [
    "my-tag"
  ]
}'

Code example

<Tabs id="install">
  <TabsTab label="Tab name">
    Lorem Ipsum
  </TabsTab>
  <TabsTab label="Other tab name">
    1. Rich content
    2. Using MDX components
    <Lightbox src="first-scaleway-chip.webp" alt="" />
    <Message type="note">
      If you have existing Instances
      in your account, you will see a list of
      these Instances instead of the
      Instance creation page, and the <Icon name="plus" />
      button for creating new Instances.
    </Message>
  </TabsTab>
</Tabs>

⚠️ Do not forget to add the id props on <Tabs>. It’s needed to distinguish multiples tabs snippet on a same page ⚠️

Help bannerLink to this anchor

Component example #1

Code example

<HelpBanner
  url="https://console.scaleway.com/support/tickets"
  title = 'Still need help?'
/>