Documentation
Feedback
Guides
Storefront Development

Storefront Development
Region Bar

The RegionBar is a custom Button, usually used on mobile devices only. It should trigger the RegionModal.

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

Example
Code

Import

Import the component from @faststore/ui

_10
import { RegionBar } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/RegionBar/styles.scss'


Usage


_11
const { modal, openModal } = useUI()
_11
return (
_11
<>
_11
<RegionBar
_11
icon={<Icon name="MapPin" />}
_11
postalCode={'151515'}
_11
onButtonClick={() => openModal()}
_11
/>
_11
{modal && <RegionModal fadeOutOnSubmit={true} />}
_11
</>
_11
)


Props

NameTypeDescriptionDefault
postalCodestringPostal code string to be display in the component
onButtonClick() => voidFunction called when button is clicked.
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.
label*stringSpecifies a label for the location text.
editLabelstringSpecifies a label for the edit text.
buttonIconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.

Design Tokens

Local tokenDefault value/Global token linked
--fs-region-bar-width100%
--fs-region-bar-paddingvar(--fs-spacing-0) var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2)
--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-widthvar(--fs-border-width)
--fs-region-bar-border-bottom-colorvar(--fs-border-color-light)

Nested Elements

CTA (Call To Action)

Local tokenDefault value/Global token linked
--fs-region-bar-cta-margin-leftauto
--fs-region-bar-cta-text-decorationunderline

Message

Local tokenDefault value/Global token linked
--fs-region-bar-message-margin-rightauto

Postal Code

Local tokenDefault value/Global token linked
--fs-region-bar-postal-code-margin-rightauto

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page