Offers

Offer components for making, viewing, and responding to price offers on marketplace items.

Make offer button

Default

Icon only

Disabled

The make offer button opens the offer dialog. Available in full (secondary variant) and icon-only (outline) modes.

Offer option cards

Quick-select offer options with 10% and 20% preset discounts plus a custom amount option. Selected state uses primary border with a subtle background.

Make offer dialog

Make an offer

🛒

Vintage leather bag

R$ 120,00

Choose your offer

Total with buyer protection: R$ 113,40

The full offer dialog shows the item info, preset and custom offer options, an optional message field, buyer protection fee, and a submit button.

Counter offer dialog

Make counter offer

When declining isn't enough, sellers can counter with a different price and an optional message. Opens from the counter button on the offer bubble.

Offer bubble states

Pending (actionable)

R$ 5.643,00R$ 7.500,00

New offer

Accepted

R$ 5.643,00R$ 7.500,00

Accepted

Declined

R$ 5.643,00R$ 7.500,00

Declined

Countered

R$ 5.643,00R$ 7.500,00

New price offered

Sender -- waiting

R$ 5.643,00R$ 7.500,00

Waiting for response

Sender -- accepted

R$ 5.643,00R$ 7.500,00

Accepted

All offer bubble states using the real OfferMessageBubble component. Pending offers show action buttons. Countered offers show the counter amount and seller message. Sender view uses muted badge styling.

Offer status badges

New offer

Pending

Accepted

Accepted

Declined

Declined

Countered

Countered

Waiting for response

Sender view