Stepper

The stepper component is a controlled increment/decrement toggle. To use, import from @marvelapp/ui:

import { Stepper } from '@marvelapp/ui';

Then pass on increment, decrement functions and children:

<Stepper onIncrement={onIncrement} onDecrement={onDecrement}>
  {count} members
</Stepper>

Kind

The <Stepper /> component has a few kinds available that can be used depending on the context of the action being performed. All of the <Button /> kinds are available on the <Stepper /> component:

<Stepper kind="ghost" /> // default
<Stepper kind="green" />
<Stepper kind="marvel" />

Size

The <Stepper /> component has a few sizes available that can be used depending on the context of the action being performed. All of the <Button /> sizes are available on the <Stepper /> component:

<Stepper size={0} />
<Stepper size={1} /> // default
<Stepper size={2} />

Disabling buttons

The <Stepper /> component can have any of the two buttons disabled with a valid reason provided.

<Stepper isDecrementDisabled={true} decrementDisabledReason="You can't remove any more members" />
<Stepper isIncrementDisabled={true} incrementDisabledReason="You can't add any more members" />

List Props