Video · Marketing & editorial
Engagement bar
YouTube-style watch-page action row: connected like/dislike segmented pill, plus share, save, custom action, and overflow-menu pills.
@byronwade/foundation@byronwade/separator@byronwade/dropdown-menu@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
1 example
Default.
Tagged for youtube, video, tier:intermediate
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| like | ToggleState | - | Grouped like toggle `{ value, defaultValue, onValueChange }`. |
| dislike | ToggleState | - | Grouped dislike toggle. |
| save | ToggleState | - | Grouped save/watch-later toggle. |
| likeCount | number | - | Compact like count beside thumbs-up. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/separator | registry | Installed through the byronwade/ui registry. |
| @byronwade/dropdown-menu | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/engagement-bar.tsx |
| Default example | content/examples/engagement-bar/default.tsx |