StepTracks · ui.voila.dev

Client

You're staffing a project

Post your project

Scope, budget, timeline and the profile you're looking for.

Select your freelancer

Choose your expert among the profiles that applied.

Receive the deliverable

Get the project report and sign off on the work.

Independent freelancer

You work as a freelancer

Stay in the loop

Get a targeted alert and apply if the project appeals to you.

Deliver the work

Join the adventure and do what you do best.

Track your engagements

Invoicing and analytics: the admin work is simplified.

<StepTracks.Root>
	<StepTracks.Track tone="highlight">
		<StepTracks.Header>
			<StepTracks.HeaderIcon><BuildingsIcon /></StepTracks.HeaderIcon>
			<StepTracks.HeaderText>
				<StepTracks.HeaderTitle>Client</StepTracks.HeaderTitle>
				<StepTracks.HeaderSubtitle>You're hiring…</StepTracks.HeaderSubtitle>
			</StepTracks.HeaderText>
		</StepTracks.Header>
		<StepTracks.Steps>
			<StepTracks.Step>
				<StepTracks.StepIcon number={1}><FileTextIcon /></StepTracks.StepIcon>
				<StepTracks.Body>
					<StepTracks.BodyTitle>Post your project</StepTracks.BodyTitle>
					<StepTracks.BodyDescription>Scope, budget…</StepTracks.BodyDescription>
				</StepTracks.Body>
			</StepTracks.Step>
		</StepTracks.Steps>
	</StepTracks.Track>
	<StepTracks.Track tone="brand">…</StepTracks.Track>
</StepTracks.Root>

number on the step icon is explicit rather than derived, so a track can start at something other than one.

API

StepTracks.Root

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/root.tsx.

StepTracks.Body

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/body.tsx.

StepTracks.BodyDescription

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <p> prop. Source: landing/components/step-tracks/body-description.tsx.

StepTracks.BodyTitle

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h4> prop. Source: landing/components/step-tracks/body-title.tsx.

StepTracks.Header

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/header.tsx.

StepTracks.HeaderIcon

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/header-icon.tsx.

StepTracks.HeaderSubtitle

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <p> prop. Source: landing/components/step-tracks/header-subtitle.tsx.

StepTracks.HeaderText

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/header-text.tsx.

StepTracks.HeaderTitle

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h3> prop. Source: landing/components/step-tracks/header-title.tsx.

StepTracks.Step

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/step.tsx.

StepTracks.StepIcon

Prop	Type	Default
`number`	`number`	required	The step's position, shown inside the marker. You number the steps, not the track.
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/step-icon.tsx.

StepTracks.Steps

Prop	Type	Default
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/steps.tsx.

StepTracks.Track

Prop	Type	Default
`tone`	`"brand"` \| `"destructive"` \| `"highlight"` \| `"muted"` \| `"primary"`	`"primary"`	Which brand role colours this section: the tint, the solid fill and any connector line move together. Tokens, so a rebrand reaches them.
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <div> prop. Source: landing/components/step-tracks/track.tsx.