Skip to content
Compositions

DeliveryBanner

Full-width strip counting down to today's delivery cut-off and naming where samples will be delivered. Green while there is time, red once less than urgentWithin remains.

Add to delivery:
Harbour Studio, Leeds

Usage

import { DeliveryBanner, DeliveryBannerProps } from "@instruments/materia-ui/compositions/delivery-banner";

Best practices

  • Pass deadline from the server's cut-off; the banner only counts down and never decides when delivery closes.

  • Give it onLocationClick when the address can be changed, so the location becomes a button rather than inert text.

  • Place it full width directly under the header; it switches to its compact layout from its own width, not the viewport's.

Props

PropTypeDefaultDescription
deadline(required)number | Date

When today's delivery cut-off passes.

dismissLabelstring"Dismiss"

Accessible name of the close button.

labelstring"Add to delivery:"

Lead-in before the countdown.

location(required)string

Delivery location, e.g. "Springfield, IL".

locationPrefixstring"Samples will be delivered to:"

Text before the location, shown only when the banner is wide.

onDismiss() => void

Renders the close button when provided.

onLocationClick() => void

Makes the location a button (e.g. to change address); plain text otherwise.

urgentWithinnumber15 * 60_000

Below this many milliseconds left, the banner turns urgent.

Also exports

  • interfaceDeliveryBannerProps

Composition

Builds on

Button, Flex, Grid, Icon, Separator