Finish
ReadyA visual component for displaying color swatches.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdFinish } from '@fbin-web/neighborhood-core';
Usage
<nbhd-finish
name="Chrome"
identifier="64430"
href="https://shop.moen.com/products/64430"
image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png"
label="finish">
</nbhd-finish>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdFinish } from '@fbin-web/neighborhood-react';
Usage
import { NbhdFinish } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdFinish
name="Chrome"
identifier="64430"
href="https://shop.moen.com/products/64430"
image="https://moen.widen.net/content/3d7ihxrfrz/png/chrome_100.png"
label="finish"></NbhdFinish>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
href | href | string | — | Specifies the URL to link to when the finish is clicked. |
product | — | ProductContent | — | Product option data associated with the finish. This property is not settable via attribute. |
name | name | string | — | The name of the finish. |
identifier | identifier | string | — | The identifier of the finish. |
image | image | string | — | The URL of the finish image. |
shape | shape | circlesquare | circle | The shape of the finish. |
label | label | string | finish | The label for the finish. |
active | active | boolean | false | Whether the finish is active and selected. Shown with a thicker border (not color alone) and announced as current on linked finishes. |
No properties match.
Product Content Data Structure
The ProductContent interface defines the structure for product content data used with finish components.
| Property | Type | Required | Description |
|---|---|---|---|
title | string | No | The title of the product content. |
identifier | string | No | The identifier of the product content. |
image | MediaContent | No | MediaContent object containing image/video data for the product content. See Media Structure section for details. |
badges | string[] | No | An array of badge labels for the product content. |
Media Content Structure
The MediaContent interface defines the structure for media objects used in product content.
| Property | Type | Required | Description |
|---|---|---|---|
src | string | Yes | The source URL of the media file. |
alt | string | Yes | Alternative text for the media, used for accessibility. |
cssClass | string | No | Additional CSS class to apply to the media element. |
crop | boolean | No | Enable crop for the media when displayed. |
imageFocus | centertoptop-rightrightbottom-rightbottombottom-leftlefttop-left | No | The focal point for the media image. |
Events
| Name | Description | Event Detail |
|---|---|---|
nbhd-finish-hover | Emitted when the mouse enters the finish component. | { product: ProductOption } |
nbhd-finish-hover-out | Emitted when the mouse leaves the finish component. | {} |
CSS Parts
| Name | Description |
|---|---|
base | The component's base wrapper. |
wrapper | Wrapper around the finish image. |
image | The finish image. |
link | Link wrapping finish image. |
nbhd-finish::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-finish or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
| Property | Token | Value | Description | Copy |
|---|---|---|---|---|
--nbhd-finish-active-borderWidth | --nbhd-border-width-heavy | 4px | Thicker border marks the selected finish without relying on color alone (WCAG 1.4.1). | |
--nbhd-finish-blockSize | --nbhd-size-control-sm | 28px | — | |
--nbhd-finish-borderColor | --nbhd-context-color-interactive-default | Adapts to surface | — | |
--nbhd-finish-borderRadius | --nbhd-border-radius-full | 9999px | — | |
--nbhd-finish-borderStyle | — | solid | — | |
--nbhd-finish-borderWidth | --nbhd-border-width-emphasis | 2px | — | |
--nbhd-finish-focus-outlineOffset | — | 3px | — | |
--nbhd-finish-host-display | — | block | — | |
--nbhd-finish-inlineSize | --nbhd-size-control-sm | 28px | — | |
--nbhd-finish-marginBlock | --nbhd-space-0 | 0px | — | |
--nbhd-finish-marginInline | --nbhd-space-0 | 0px | — | |
--nbhd-finish-maxBlockSize | --nbhd-size-control-sm | 28px | — | |
--nbhd-finish-maxInlineSize | --nbhd-size-control-sm | 28px | — | |
--nbhd-finish-overflow | — | hidden | — | |
--nbhd-finish-transitionDuration | --nbhd-motion-duration-slow | 0.5s | — | |
--nbhd-finish-transitionProperty | — | border-color | — | |
--nbhd-finish-transitionTimingFunction | --nbhd-motion-easing-standard | ease | — |
No finish match.
Dependencies
Child components <nbhd-finish> renders internally. Import them too when you tree-shake.