Buttons & CTAs / Button

Order Button

Commerce-specific action buttons in Badho DS. Pink/magenta (#DE078E) with 8 purposes across two sizes and three interaction states — simple outlined buttons, a tonal notified state, and three segmented stepper controls.

V 1.0View in Storybook
Controls
Purpose
Size
State

Variants

Simple Buttons — SmallAddToCart, AddToCartPlus, GetQuote, Notify × 3 states at SM
enabledpresseddisabledAddToCartAddToCartPlusGetQuoteNotify
Simple Buttons — DefaultAddToCart, AddToCartPlus, GetQuote, Notify, Notified × 3 states at Default
enabledpresseddisabledAddToCartAddToCartPlusGetQuoteNotifyNotified
Tonal — Notified (Small)Notified state across all 3 states, SM size
Steppers — SmallQtyDelete, QtyStepper, QtyEditable × 3 states at SM
enabledpresseddisabledQtyDelete
10
10
10
QtyStepper
10
10
10
QtyEditable
10
10
10
Steppers — DefaultQtyDelete, QtyStepper, QtyEditable × 3 states at Default
enabledpresseddisabledQtyDelete
10
10
10
QtyStepper
10
10
10
QtyEditable
10
10
10

Props

Name
Type
Default
purpose
'AddToCart' | 'AddToCartPlus' | 'GetQuote' | 'Notify' | 'Notified' | 'QtyDelete' | 'QtyStepper' | 'QtyEditable'
'AddToCart'
size
'sm' | 'default'
'default'
state
'enabled' | 'pressed' | 'disabled'
'enabled'
quantity
number
10
step
number
10
onDecrement
() => void
—
onIncrement
() => void
—
onEdit
() => void
—
onDelete
() => void
—

Code

import { OrderButton } from '@/src/components/Button/Button'

// Simple outlined buttons
<OrderButton purpose="AddToCart"     size="default" state="enabled" />
<OrderButton purpose="AddToCartPlus" size="sm"      state="pressed" />
<OrderButton purpose="GetQuote"      size="default" state="disabled" />
<OrderButton purpose="Notify"        size="sm"      state="enabled" />

// Tonal notified
<OrderButton purpose="Notified" size="default" state="enabled" />

// Segmented steppers
<OrderButton purpose="QtyDelete"   size="default" quantity={10} step={10} onDelete={...} onIncrement={...} />
<OrderButton purpose="QtyStepper"  size="default" quantity={10} step={10} onDecrement={...} onIncrement={...} />
<OrderButton purpose="QtyEditable" size="sm"      quantity={10}           onEdit={...} />