Skip to canvas
Proton Design System
/
Introduction
Changelog
Colors
Icons
Layers Management
Responsive
Sass Css Variables
Typography
Alert
Autocomplete
Badge
ButtonGroup
Checkbox
Collapsible
Copy
CountrySelect
DateInput
Details
Dropdown
Dropzone
EllipsisLoader
Errors
Icon
InputButton
InputField
InputFieldStacked
LabelStack
Logo
Meter
MiddleEllipsis
Modal
Notification
Price
Progress
Promotion Button
QuickSettings
Radio
Scale
Select
Spotlight
Table
Tabs
Toggle
TopBanner
TotpInput
VideoInstructions
Avatar
Banner
Button
Card
CircleLoader
DashboardCard
Donut
Href
InlineLinkButton
Input
Kbd
NotificationDot
Pill
ProtonLoader
Scroll
Slider
Stepper
UserAvatar
VerticalStepsSkip to canvas
Vr
Border
Border Radius
Colors
Columns
Cursor
Divide
ExpandClickArea
Gap
HidingDisablingContent
InteractiveFocusHelper
Lists
Margin
Opacity
OpacityOnHover
Padding
Position
Print
Ratio Container
Responsive
Scroll
Shadow
Sizing
Transforms
Typography
  1. Recently opened
  2. VerticalStepscomponents
  3. Back to componentsESC
  4. Clear history
Skip to sidebar
1import { Icon } from '@proton/components'; 2 3import VerticalStep, { VerticalStepStatusEnum } from './VerticalStep'; 4import VerticalSteps from './VerticalSteps'; 5import mdx from './VerticalSteps.mdx'; 6 7export default { 8 component: VerticalSteps, 9 subcomponents: { VerticalStep }, 10 title: 'components/VerticalSteps', 11 parameters: { docs: { page: mdx } }, 12}; 13
14export const Basic = () => ( 15 <VerticalSteps> 16 <VerticalStep 17 icon={<Icon name="checkmark" className="m-auto" size={4} />} 18 title="Choose a username" 19 description="You successfully selected your new email address." 20 status={VerticalStepStatusEnum.Passed} 21 /> 22 <VerticalStep 23 icon={<Icon name="lock" className="m-auto" size={4} />} 24 title="Today: get instant access" 25 description="15 GB secure mailbox with unlimited personalisation." 26 status={VerticalStepStatusEnum.Done} 27 /> 28 <VerticalStep 29 icon={<Icon name="bell" className="m-auto" size={4} />} 30 title="Day 24: Trial end reminder" 31 description="We’ll send you a notice. Cancel anytime." 32 /> 33 <VerticalStep 34 icon={<Icon name="calendar-row" className="m-auto" size={4} />} 35 title="Day 30: Trial ends" 36 description="Your subscription will start Jan 16th. Cancel anytime before." 37 /> 38 </VerticalSteps> 39);
40 41export const Primary = () => ( 42 <VerticalSteps className="vertical-steps--primary"> 43 <VerticalStep 44 titleCentered 45 titleBold={false} 46 title="Select service to update" 47 icon={<span className="m-auto">1</span>} 48 /> 49 <VerticalStep 50 titleCentered 51 titleBold={false} 52 title="Do another great step" 53 icon={<span className="m-auto">2</span>} 54 /> 55 <VerticalStep 56 titleCentered 57 titleBold={false} 58 title="Do another great step again" 59 icon={<span className="m-auto">3</span>} 60 /> 61 <VerticalStep 62 titleCentered 63 titleBold={false} 64 title="Do another great step final step" 65 icon={<span className="m-auto">4</span>} 66 /> 67 </VerticalSteps> 68);