Lynx/Modules/DaisyUI/StepsAlso available onWebNative
@sigx/lynx-daisyui · Stable · Component library

Steps#

Display a list of ordered steps to show progress through a multi-stage process.

Import#

TSX 
import { Steps } from '@sigx/lynx-daisyui';

Steps is a compound component: the container is Steps and each step is rendered with Steps.Step.

Props#

Steps#

PropTypeDefaultDescription
verticalbooleanfalseLay the steps out vertically. When false (the default) the steps are arranged horizontally.
classstring-Additional CSS classes applied to the container.
childrenslot-The Steps.Step elements that make up the sequence.

Steps.Step#

PropTypeDefaultDescription
color'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'-Color of the step indicator and connector. Apply it to completed/active steps to visualize progress.
contentstring-Short text shown inside the step indicator (for example a number, a checkmark glyph, or an initial).
classstring-Additional CSS classes applied to the step.
childrenslot-Label content rendered next to the step indicator.

Basic Usage#

Wrap each stage in a Steps.Step. Mark the steps that are done or active with a color:

TSX 
import { component } from '@sigx/lynx';
import { Steps, Text } from '@sigx/lynx-daisyui';

const Checkout = component(() => {
    return () => (
        <Steps>
            <Steps.Step color="primary" content="1">
                <Text>Cart</Text>
            </Steps.Step>
            <Steps.Step color="primary" content="2">
                <Text>Shipping</Text>
            </Steps.Step>
            <Steps.Step content="3">
                <Text>Payment</Text>
            </Steps.Step>
            <Steps.Step content="4">
                <Text>Confirm</Text>
            </Steps.Step>
        </Steps>
    );
});

Vertical#

Set vertical to stack the steps in a column, which suits narrow native layouts:

TSX 
import { component } from '@sigx/lynx';
import { Steps, Text } from '@sigx/lynx-daisyui';

const Onboarding = component(() => {
    return () => (
        <Steps vertical>
            <Steps.Step color="success" content="✓">
                <Text>Create account</Text>
            </Steps.Step>
            <Steps.Step color="success" content="✓">
                <Text>Verify email</Text>
            </Steps.Step>
            <Steps.Step color="primary" content="3">
                <Text>Add payment method</Text>
            </Steps.Step>
            <Steps.Step content="4">
                <Text>Invite team</Text>
            </Steps.Step>
        </Steps>
    );
});

Colors#

Each step takes its own color, so you can mix states across the sequence — for example success for completed steps, warning for one needing attention, and no color for upcoming steps:

TSX 
import { component } from '@sigx/lynx';
import { Steps, Text } from '@sigx/lynx-daisyui';

const Pipeline = component(() => {
    return () => (
        <Steps>
            <Steps.Step color="success" content="✓">
                <Text>Build</Text>
            </Steps.Step>
            <Steps.Step color="success" content="✓">
                <Text>Test</Text>
            </Steps.Step>
            <Steps.Step color="warning" content="!">
                <Text>Review</Text>
            </Steps.Step>
            <Steps.Step color="info" content="4">
                <Text>Deploy</Text>
            </Steps.Step>
        </Steps>
    );
});