Region Bar
The RegionBar is a custom Button, usually used on mobile devices only. It should trigger the RegionModal.
The component is part of Regionalization feature.
Overview
Import
Import the component from @faststore/ui
import { RegionBar } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/RegionBar/styles.scss'Usage
const { modal, openModal } = useUI()
return (
<>
<RegionBar onButtonClick={() => openModal()} />
{modal && <RegionModal fadeOutOnSubmit={true} />}
</>
)Props
| Name | Type | Description | Default |
|---|---|---|---|
| postalCode | string | Postal code string to be display in the component | |
| onButtonClick | () => void | Function called when button is clicked. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-region-bar-width | 100% |
--fs-region-bar-padding | var(--fs-spacing-0) var(--fs-spacing-3) |
--fs-region-bar-text-color | var(--fs-color-text-display) |
--fs-region-bar-bkg-color | var(--fs-color-body-bkg) |
--fs-region-bar-border-bottom-width | var(--fs-border-width) |
--fs-region-bar-border-bottom-color | var(--fs-border-color-light) |
Nested Elements
CTA (Call To Action)
| Local token | Default value/Global token linked |
|---|---|
--fs-region-bar-cta-margin-left | auto |
--fs-region-bar-cta-text-decoration | underline |
Message
| Local token | Default value/Global token linked |
|---|---|
--fs-region-bar-message-margin-right | auto |
Postal Code
| Local token | Default value/Global token linked |
|---|---|
--fs-region-bar-postal-code-margin-right | auto |
Customization
For further customization, you can use the following data attributes:
data-fs-region-bar
data-fs-region-bar-postal-code
data-fs-region-bar-cta
data-fs-region-bar-message