Editor Components listing - Docs

Buttons

🧩 This component uses a Tag style.

Code example:

<Navigation>
  <PreviousButton to="/">Previous</PreviousButton>
  <NextButton to="/">Next</NextButton>
</Navigation>

Render:

Navigation with title

Navigation with one button

Steps & StepButton

🧩 This component uses a Tag style.

Code example:

<Steps>
  <StepButton to="/">How-to create an Instance</StepButton>
  <StepButton to="/">How-to create an account</StepButton>
</Steps>

Render:

How-to create an account

Two steps

How-to create an Instance How-to create an account

ClickableBanner

🧩 This component uses a Tag style.

Code example:

With a product logo

<ClickableBanner
  productLogo="cli"
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Without a product logo

Code example:

<ClickableBanner
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

DefaultCard

🧩 This component uses a Tag style.

Props:

title (mandatory!)
tags (use OBJECT array)
description
url (for link)
label (for link)

Code example:

<DefaultCard 
  title="Lorem Ipsum"
  tags={['one', 'two', 'three']}
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#"
  label="Link label" />

Render:

Lorem Ipsum

onetwothree

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

Minimal

Lorem Ipsum

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Linked

Lorem Ipsum

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

Linked, no description & default label

Lorem IpsumSee more about: Lorem Ipsum

Linked & tags, without description

Lorem Ipsum

onetwothree

Link label

GeneralLinks

⚙️ This component is a “system codebase” component.

General links

Grid

🧩 This component uses a Tag style.

Code example:

<Grid>
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
</Grid>

Render:

Example using DefaultCard in Grid wrapper.

Lorem Ipsum

onetwothree

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

Lorem Ipsum

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Lorem Ipsum

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Lorem Ipsum

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Lorem Ipsum

onetwothree

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

Lorem Ipsum

onetwothree

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

Lorem Ipsum

onetwothree

Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Link label

HelpBanner

🧩 This component uses a Tag style.

Code example:

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

Render