Ant Design, how to customize Steps component

Question

I am using the Ant Design Steps component. I want to append additional components such as a button next to each step's description (make it more actionable).

I also want to make a border around each step's description.

Does anyone know how to use it?

Answer 1

Method

If you check their document, you would find that there are 4 APIs with type string|ReactNode

• title
• subTitle
• icon
• description

This means you can pass a child component to those props, which can be used for customizing.

Refer:

• API of Steps.Step

---

Demo

<Step
  title="Step 1"
  subTitle={<button>XXX</button>}
  status="finish"
  icon={<AcUnit />}
  description="This is a description."
/>