Components

Steps

The steps component guides developers through sequential workflows, such as API integrations and authentication setups, by displaying a chronological, numbered series of actions.

Usage

Use Steps to walk a developer through a process, like getting access to an API or setting up an integration. Steps is a wrapper that groups a sequence of numbered items together, and each numbered item is a Step.

Wrap your Step components in a Steps component. Steps controls the shared layout and styling for the group, and numbers each Step automatically based on the order it appears in.

1

Request access

Open the Payments API's page in the portal and select Request Access. Some APIs are approved automatically; others are reviewed by the team that manages them.

2

Generate an API key

Once you're approved, open Applications and generate a new key or set of OAuth credentials.

3

Make your first call

Send a request to any endpoint using your new credentials. A successful response means you're ready to start building.

::steps
  ::step
  #title
  Request access

  #default
  Open the Payments API's page in the portal and select Request Access. Some APIs are approved automatically; others are reviewed by the team that manages them.
  ::

  ::step
  #title
  Generate an API key

  #default
  Once you're approved, open Applications and generate a new key or set of OAuth credentials.
  ::

  ::step
  #title
  Make your first call

  #default
  Send a request to any endpoint using your new credentials. A successful response means you're ready to start building.
  ::
::

By default, each Step is numbered by its position in the group. Setting a Step's number prop overrides its own number without affecting how its siblings are numbered. See number below.

Steps

Wraps a group of Step components, and provides the shared layout and default styling that every Step in the group inherits.

Props

stepProps

Any of the Step component's StepProps can be set here to apply it to every Step in the group at once, instead of repeating it on each Step individually. Setting the same prop directly on an individual Step still takes precedence over stepProps.

numberColor and numberBackground are left unset by default, so each Step can resolve its own color: neutral by default, or the portal's primary color when its active prop is true. Setting either one here overrides that for the whole group.

  • Type: Object
1

Request access

Open the Payments API's page in the portal and select Request Access.

2

Generate an API key

Once you're approved, open Applications and generate a new key or set of OAuth credentials.

::steps
---
step-props:
  number-color: "#ffffff"
  number-background: "darkcyan"
  connector-color: "darkcyan"
---
  ::step
  #title
  Request access

  #default
  Open the Payments API's page in the portal and select Request Access.
  ::

  ::step
  #title
  Generate an API key

  #default
  Once you're approved, open Applications and generate a new key or set of OAuth credentials.
  ::
::
Steps Component Props
Options to bind to all Step components in the current Steps group.

The CSS text color of the step number.

The CSS background of the step number.

The CSS color of the connecting line drawn between step numbers. Set to `transparent` to hide it.

Shared Props

The Steps component also includes the shared props listed below:

  • margin - default is var(--kui-space-0, 0).
  • maxWidth - default is 100%.
  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add Step components to display inside Steps.

Step

An individual, numbered step. Must be used as a direct child of the Steps component.

Props

Any prop you set directly on a Step overrides the same setting from the group's stepProps.

number

By default, each Step's number is inferred from its position in the group. Set number directly on a Step to override its own number, without changing how its siblings are numbered.

  • Type: number
  • Default: undefined
5

Reissue an expired key

If your key already expired, jump straight to reissuing one without repeating the earlier steps.

2

Continue setup

New here? Start by requesting access before generating a key.

::steps
  ::step
  ---
  number: 5
  ---
  #title
  Reissue an expired key

  #default
  If your key already expired, jump straight to reissuing one without repeating the earlier steps.
  ::

  ::step
  #title
  Continue setup

  #default
  New here? Start by requesting access before generating a key.
  ::
::

title

Text to display as the step title. If the title slot is provided, the slot content takes precedence.

  • Type: string
  • Default: undefined
1

Request access

Open the Payments API's page in the portal and select Request Access.

::steps
  ::step
  ---
  title: "Request access"
  ---
  Open the Payments API's page in the portal and select Request Access.
  ::
::

titleTag

The HTML tag to use for the step title element. Accepts a standard HTML tag name; falls back to p if the given tag isn't a permitted element (e.g. script).

  • Type: string
  • Default: p
1

Request access

Open the Payments API's page in the portal and select Request Access.

::steps
  ::step
  ---
  title: "Request access"
  title-tag: "h3"
  ---
  Open the Payments API's page in the portal and select Request Access.
  ::
::

active

Highlights the step number using the portal's primary color, to indicate this is the current or active step. Has no effect if numberColor or numberBackground is also set (directly on the Step, or via the group's stepProps).

  • Type: boolean
  • Default: false
1

Generate an API key

You're currently on this step.

2

Make your first call

Up next.

::steps
  ::step
  ---
  active: true
  ---
  #title
  Generate an API key

  #default
  You're currently on this step.
  ::

  ::step
  #title
  Make your first call

  #default
  Up next.
  ::
::

StepProps

Each property below can be set directly on a Step, or on the parent Steps component's stepProps to apply it to every Step in the group.

numberColor

The CSS text color of the step number.

  • Type: string
  • Default: var(--kui-color-text, #000933) (the same as titleColor). When the Step's active prop is true and no numberColor is otherwise set, var(--kui-button-color-text-primary) is used instead, falling back to var(--kui-color-text-inverse, #ffffff) if that token isn't set. --kui-button-color-text-primary already resolves to a color that contrasts with the portal's primary color, whether that color is light or dark.
numberBackground

The CSS background of the step number.

  • Type: string
  • Default: var(--kui-color-background-neutral-weaker, #e0e4ea). When the Step's active prop is true and no numberBackground is otherwise set, var(--kui-color-background-primary, #0044f4) is used instead.
numberSize

The width and height of the step number. Accepts a CSS length string (e.g. "24px") or a unitless number/numeric string (e.g. 24 or "24"), which is treated as pixels.

  • Type: string | number
  • Default: 28px
connectorColor

The CSS color of the connecting line drawn between step numbers. Set to transparent to hide it.

  • Type: string
  • Default: var(--kui-color-border, #e0e4ea)
1

Request access

Open the Payments API's page in the portal and select Request Access.

2

Generate an API key

Once you're approved, open Applications and generate a new key or set of OAuth credentials.

::steps
  ::step
  ---
  number-color: "#ffffff"
  number-background: "darkcyan"
  number-size: 40
  connector-color: "darkcyan"
  ---
  #title
  Request access

  #default
  Open the Payments API's page in the portal and select Request Access.
  ::

  ::step
  #title
  Generate an API key

  #default
  Once you're approved, open Applications and generate a new key or set of OAuth credentials.
  ::
::
titleColor

The CSS color of the step title text.

  • Type: string
  • Default: var(--kui-color-text, #000933)
titleFontSize

The font size of the step title text.

  • Type: string
  • Default: var(--kui-font-size-40, 16px)
titleFontWeight

The font weight of the step title text.

  • Type: string
  • Default: var(--kui-font-weight-semibold, 600)
titleLineHeight

The CSS line height of the step title text.

  • Type: string
  • Default: var(--kui-line-height-40, 24px)
1

Request access

Open the Payments API's page in the portal and select Request Access.

::steps
  ::step
  ---
  title-color: "darkcyan"
  title-font-size: "20px"
  title-font-weight: "700"
  title-line-height: "28px"
  ---
  #title
  Request access

  #default
  Open the Payments API's page in the portal and select Request Access.
  ::
::

Shared Props

The Step component also includes the shared props listed below:

  • styles - default is ''.

See here for more information on shared props.

Slots

title

Use the #title slot to customize the step title. Slot content takes precedence over the title prop.

1

View the Payments API

Open the Payments API's page in the portal and select Request Access.

::steps
  ::step
  #title
  [View the Payments API](/){ style="color: darkcyan; font-weight: 600"}

  #default
  Open the Payments API's page in the portal and select Request Access.
  ::
::

default

Use the #default slot to customize the step's content.

1

Generate an API key

Read the authentication guide before you get started.

::steps
  ::step
  ---
  title: "Generate an API key"
  ---
  [Read the authentication guide](/) before you get started.
  ::
::