NavigationContentFooter
Jump toSuggest an edit
Was this page helpful?

Navigation and layout components

ButtonsLink to this anchor

🧩  This component uses a Tag style.

Code example:

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

Render:

See also
PreviousNext

Navigation with title

See also
PreviousNext

Navigation with one button

See also
Previous
See also
Lorem ipsum dolor sit amet

Steps & StepButtonLink to this anchor

🧩  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 stepsLink to this anchor

How-to create an InstanceHow-to create an account

ClickableBannerLink to this anchor

🧩  This component uses a Tag style.

Code example:

<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="/#"
  label="Link"
/>

Render:

CLI

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

Link

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="/#"
  label="Link"
/>

Render:

CLI

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

Link

DefaultCardLink to this anchor

🧩  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

MinimalLink to this anchor

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

LinkedLink to this anchor

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 labelLink to this anchor

Lorem IpsumSee more about: Lorem Ipsum

Linked & tags, without descriptionLink to this anchor

Lorem Ipsum
onetwothree
Link label

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

General links

  • Slack Community
  • Service Status
  • Scaleway Ideas
  • Report Abuse
  • Technical Assistance

GridLink to this anchor

🧩  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

HelpBannerLink to this anchor

🧩  This component uses a Tag style.

Code example:

<HelpBanner 
  url="/#"
  title = 'Still need help?'
/>

Render

🧩  This component uses a Tag style.

⚠️ Use a native markdown list in LinksList component for each LinkList

Code example:

<LinksList>
  - <LinkList to="/path-to-page/" label="My secrets and variables are not injected properly in my functions" />
  - <LinkList to="/path-to-page/" label="My function falls after trying too many times" />
  - <LinkList to="/path-to-page/" label="My function is an error state" />
  - <LinkList to="/path-to-page/" label="Tests fail on Serverless Functions" />
  - <LinkList to="/path-to-page/" label="Unable to find the function handler" />
  - <LinkList to="/path-to-page/" label="I am unable to create a Serverless Functions namespace" />
  - <LinkList to="/path-to-page/" label="I am experiencing timeout errors" />
</LinksList>

Render:

Log (Changelog)Link to this anchor

🧩  This functionnality uses MDX files.

⚙️  This is a “system codebase” feature.

See Changelog page.

Each “Log” is MDX file:

  • Go to changelog/ folder
  • Add or choose a directory relative to the log you want to add
  • Create a .mdx file in it

NOTES:

  • Organize changelog/ folder structure as you want
  • The .mdx filename does not matter
  • Assets should be in a asset directory, sibling of your .mdx file

Log file frontmatterLink to this anchor

At top of .mdx file, you MUST add data in frontmatter:

---
title: Migration to the new Object Storage backend (HIVE) for all regions
status: changed
author:
    fullname: 'Join the #container-registry channel on Slack.'
    url: 'https://slack.scaleway.com/'
date: 2022-01-02
category: compute
product: container-registry
---
  • title (mandatory)
  • status (mandatory)
    • added
    • security
    • changed
    • deprecated
    • removed
    • fixed
  • author
    • fullname (optional / mandatory IF url is set) It could be a name or a sentence if you please.
    • url (optionnal)
  • date (mandatory) YYYY-MM-DD
  • category (mandatory) kebab-case
  • product (mandatory) kebab-case

Log file contentsLink to this anchor

The content section works as any documentation .mdx file. It accept markdown and Components as well. Be concise !

ChangelogListLink to this anchor

🧩  This component uses a Tag style.

The ChangelogList component is used to display the latest entries of the changelog, in a particular page.

Display all productsLink to this anchor

If there is no product name passed to the component, the list will display the X latest changes from the changelog:

Code example:

<ChangelogList numberOfChanges={4} />

Render:

  • InterLink

    Added

    Scaleway InterLink is a new network product that offers a direct, private, fast, and secure connection between your infrastructure (on-premise, private cloud, or another public cloud) and your Scaleway VPC. This connection bypasses the public internet, providing a reliable and low-latency connectivity solution. Read the documentation.

  • SQL Databases

    Changed

    The SQL request size limit increased to 1,024 KB for Serverless SQL Databases

    The SQL request size limit for Serverless SQL Databases increased from 512 KB to 1,024 KB. Note that responses to SQL queries are not limited in size and can exceed 1,024 KB.

  • Product Catalog

    Added

    The Product Catalog API is now available

    You can now have programmatic access to detailed product information including specifications and pricing of the complete Scaleway product catalog.

    For more details, check out our API documentation for Product Catalog.

  • Secret Manager

    Changed

    New behavior for secret deletion in Secret Manager

    When deleted, secrets and versions are now kept as "scheduled for deletion" for 7 days. Secret versions scheduled for deletion are free. They cannot be accessed during this period and can be restored for a cost of 1 cent per version.

    This feature protects infrastructures and applications from the impacts of accidental deletion of secrets or malicious actions.

View the full changelog

Display only the changes for a specific productLink to this anchor

By adding a product name to the component, the list will display the X latest changes from the changelog for this product:

Code example:

<ChangelogList productName="instances" numberOfChanges={2} />

Render:

  • Load Balancers

    Removed

    Static attachment is no longer available

    The feature to statically attach a Private Network to a Load Balancer (deprecated in September 2023) will be removed from the API in January 2025. To achieve similar functionality, use the ipam_ids parameter with the Private Network attachment endpoint.

  • Load Balancers

    Changed

    Static private network attachment change

    Following the deprecation of static Private Network attachment, the Load Balancer API will no longer accept static Private Network attachement with an IP address outside of the Private Network subnet.

    Please update to DHCP attachment type (recommended) or use an IP address which belongs to the Private Network subnet.

    If you already use DHCP attachment mode or static attachement mode with an IP address belonging to the Private Network subnet, you're not affected by this change.

View the full changelog

About Download link in content

🧩  This feature uses a native-extended Markdown style.

  • Use [Download](document-pdf-name.pdf) the document as PDF file.
  • Place the PDF file at a sibling assets directory
    • This is usefull to automatically get the filesize data
  • Then it should appear like this (with PDF icon):

    • 📄 Download (PDF, 2.26MB) the document as PDF file.

ProductCardLink to this anchor

🧩  This component uses a Tag style.

Props:

  • productIcon (mandatory!) - Icon name from Ultraviolet lib
  • title (mandatory!)
  • description
  • url (for link, mandatory!)

Code example:

<ProductCard 
  productIcon="AccountExperienceProductIcon"
  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."
  url="/#" />

Render:

Full exampleLink to this anchor

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

ProductHeaderLink to this anchor

Props:

  • productName (mandatory!)
  • description
  • productLogo
  • url (for link)
  • label (for link)

Code example:

<ProductHeader
  productName="Instances"
  productLogo="instances"
  description="Lorem ipsum..."
  url="/#"
  label="Instances quickstart"
/>

Render:

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

SummaryCardLink to this anchor

There is 4 SummaryCard using props mentionned below.

The icon names are not random ones they come from Ultraviolet lib.

Code example:

<SummaryCard
  title="Quickstart"
  icon="rocket"
  description="lorem ipsum dolor sit amet, consectetur adipiscing elit in in part of the description"
  label="Read More"
  url="/#"
/>

Render:

Quickstart

Learn how to create, manage and delete a Kubernetes cluster in a few steps.

Read More

Concepts

Core concepts that give you a better understanding of Kubernetes Kapsule and Kosmos.

Read More

How-tos

Check our guides to creating and managing Kubernetes clusters and their features.

Read More

Reference content

Guides to help you configuring your cluster and its advanced configuration.

Read More

Ultraviolet illustrationsLink to this anchor

Here is a list of current Ultraviolet illustrations available

accountExperience
apiGateway
appleSilicon
auditTrail
blockStorage
cli
cockpit
containerRegistry
containers
costManager
dedibox
dediboxVps
distributedDataLab
domainsAndDns
edgeServices
elasticMetal
environmentalFootprintCalculator
fileStorage
functions
generativeApi
iam
inference
instance
interlink
iotHub
ipam
ipfsNaming
ipfsPinning
jero
k8sKapsule
k8sKosmos
kms
loadBalancers
managedDatabase
managedSearchDatabase
mongoDB
nabu
nats
objectStorage
publicGateway
quantum
quantumApplication
redis
savingsPlan
secretManager
serverlessDB
serverlessJob
sns
sqs
terraform
transactionalEmail
vpc
webHosting
webPlatform
accountBilling
generic
learning
writeCommunity

Ultraviolet product iconsLink to this anchor

Here is a list of current Ultraviolet product icons available

AbuseProductIcon
AccountExperienceProductIcon
AdditionalDiskProductIcon
AdvancedSettingsProductIcon
AnsibleProductIcon
ApiGatewayProductIcon
ApiKeyProductIcon
ApiProductIcon
AppleSiliconProductIcon
ApplicationLibraryProductIcon
ApplicationProductIcon
AuditTrailProductIcon
BackendsProductIcon
BandwidthProductIcon
BasicSupportProductIcon
BillingProductIcon
BlockStorageProductIcon
CbProductIcon
CdnProductIcon
ChangelogProductIcon
CliProductIcon
CloudHostingProductIcon
CockpitProductIcon
ColdStorageProductIcon
ConsoleProductIcon
ContainersProductIcon
CostManagerProductIcon
DataWarehouseProductIcon
DdosProductIcon
DdxCoreServersProductIcon
DdxProServersProductIcon
DdxStartServersProductIcon
DedibackupProductIcon
DediboxProductIcon
DedicatedControlPlaneProductIcon
DedicatedServerProductIcon
DeleteMarkerProductIcon
DevicesProductIcon
DirectConnectProductIcon
DistributedDataLabProductIcon
DnsProductIcon
DocumentDbProductIcon
DocumentationProductIcon
DomainsProductIcon
EdgeServicesProductIcon
ElasticMetalAluminiumProductIcon
ElasticMetalBerylliumProductIcon
ElasticMetalIridiumProductIcon
ElasticMetalLithiumProductIcon
ElasticMetalProductIcon
ElasticMetalTitaniumProductIcon
EnvironmentalFootprintCalculatorProductIcon
FileProductIcon
FlexibleIpProductIcon
FolderProductIcon
FrontEndsProductIcon
FunctionsProductIcon
GenerativeApiProductIcon
GoldSupportProductIcon
GpuServersProductIcon
HubNetworksProductIcon
HubRoutesProductIcon
IamProductIcon
IconElasticMetalProductIcon
IconSdkJsProductIcon
IconSdkProductIcon
ImagesProductIcon
InferenceProductIcon
InstanceCostOptimizedProductIcon
InstanceEnterpriseProductIcon
InstanceGpuProductIcon
InstanceLearnProductIcon
InstancePopProductIcon
InstanceProductIcon
InstanceScallingGroupsProductIcon
InstanceWopProductIcon
InterlinkProductIcon
IotEdgeProductIcon
IotProductIcon
IpFailoverProductIcon
IpamProductIcon
IpfsNamingProductIcon
IpfsProductIcon
JeroProductIcon
K8sKosmosProductIcon
KmsProductIcon
KubernetesProductIcon
LbProductIcon
LifeCycleRulesProductIcon
MacMiniM2ProductIcon
MacMiniM4ProductIcon
MacMiniProductIcon
ManagedSearchDatabaseProductIcon
MonitoringProductIcon
MultiUserProductIcon
NabuProductIcon
NatsProductIcon
NetworkAclsProductIcon
ObjectStorageProductIcon
OsProductIcon
PackerProductIcon
PlacementGroupProductIcon
PlatinumSupportProductIcon
PolicyProductIcon
PoolProductIcon
PostgresqlMysqlProductIcon
PrivateIpProductIcon
PrivateNetworkProductIcon
PublicGatewayProductIcon
QaasProductIcon
QuantumApplicationProductIcon
QueueingProductIcon
RabbitMqProductIcon
RdbProductIcon
RedisProductIcon
RegistryProductIcon
RocketProductIcon
RouterProductIcon
RpnProductIcon
RpnSanProductIcon
RpnV1ProductIcon
RpnV2ProductIcon
SavingPlanProductIcon
SdkGoProductIcon
SdkPythonProductIcon
SecretManagerProductIcon
SecurityGroupProductIcon
SepaProductIcon
ServerProductIcon
ServerlessDbProductIcon
ServerlessJobsProductIcon
ServiceLevelProductIcon
SilverSupportProductIcon
SmsProductIcon
SmtpProductIcon
SnapshotsProductIcon
SnsProductIcon
SqsProductIcon
SslCertificatesProductIcon
StoreServersProductIcon
SupportProductIcon
TerraformProductIcon
TransactionalEmailProductIcon
TutorialProductIcon
UserProductIcon
VerifyCardProductIcon
VideoProductIcon
VolumeProductIcon
VpcProductIcon
VpsProServersProductIcon
VpsServersProductIcon
VpsStartServersProductIcon
WebPlatformProductIcon
WebhostingProductIcon
ZoneProductIcon

GuideFlow IntegrationLink to this anchor

StoryLane IntegrationLink to this anchor

Illustration CardsLink to this anchor

Here is an example of a card component using illustrations with its troubleshooting link and automatically placed due to IllustrationCardsContainer wrapping each manually added cards.

<Grid>
<ProductCardIllustration
  productLogo="serverlessDB"
  url="/serverless/troubleshooting/"
  label="Serverless"
/>
</Grid>
Serverless
Compute
Storage
Web Hosting
Learning
Generic
Cockpit
VPC
Was this page helpful?
API DocsScaleway consoleDedibox consoleScaleway LearningScaleway.comPricingBlogCareers
© 2023-2025 – Scaleway