Steps

Steps can be used to show a list of steps in a process.

Register
Choose plan
Purchase
Receive Product

Code Example

<Steps>
  <Step primary>Register</Step>
  <Step primary>Choose plan</Step>
  <Step>Purchase</Step>
  <Step>Receive Product</Step>
</Steps>

Components

Step components include the following:

Steps
Step

Steps

The Steps component wraps multiple Step components. Steps can be customized with the following props:

Prop	Type	Description
`horizontal`	boolean	Creates horizontal steps. `default: true`
`vertical`	boolean	Creates vertical steps.

Step

Step components can be customized with the following props

Prop	Type	Description
`glyph`	boolean	Allows placing an emoji in the step
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.

Vertical

Register
Choose plan
Purchase
Receive Product

Code Example

<Steps vertical>
  <Step primary>Register</Step>
  <Step primary>Choose plan</Step>
  <Step>Purchase</Step>
  <Step>Receive Product</Step>
</Steps>

Responsive

Register
Choose plan
Purchase
Receive Product

Code Example

<Steps vertical class="lg:steps-horizontal">
  <Step primary>
    Register
  </Step>
  <Step primary>
    Choose plan
  </Step>
  <Step>Purchase</Step>
  <Step>Receive Product</Step>
</Steps>

With Custom Glyphs

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
Final

Code Example

<Steps>
  <Step neutral glyph="?">Step 1</Step>
  <Step neutral glyph="!">Step 2</Step>
  <Step neutral glyph="✓">Step 3</Step>
  <Step neutral glyph="✕">Step 4</Step>
  <Step neutral glyph="★">Step 5</Step>
  <Step neutral glyph="">Step 6</Step>
  <Step neutral glyph="●">Step 7</Step>
  <Step>Final</Step>
</Steps>

Custom Colors

Fly to moon
Shrink the moon
Grab the moon
Sit on toilet

Code Example

<Steps>
  <Step info>Fly to moon</Step>
  <Step info>Shrink the moon</Step>
  <Step info>Grab the moon</Step>
  <Step error glyph="?">Sit on toilet</Step>
</Steps>

Long Example

start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
end

Code Example

<Steps>
  <Step>start</Step>
  <Step secondary>2</Step>
  <Step secondary>3</Step>
  <Step secondary>4</Step>
  <Step>5</Step>
  <Step accent>6</Step>
  <Step accent>7</Step>
  <Step>8</Step>
  <Step error>9</Step>
  <Step error>10</Step>
  <Step>11</Step>
  <Step>12</Step>
  <Step warning>13</Step>
  <Step warning>14</Step>
  <Step>15</Step>
  <Step neutral>16</Step>
  <Step neutral>17</Step>
  <Step neutral>18</Step>
  <Step neutral>19</Step>
  <Step neutral>20</Step>
  <Step neutral>21</Step>
  <Step neutral>22</Step>
  <Step neutral>23</Step>
  <Step neutral>end</Step>
</Steps>

Prev Pagination

Next Tabs