Concepts
Action Components
Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
Concepts
Action Components
- A customizable button component that can be used to add custom actions and extend the functionality of any Velt component. Some examples include:
- Add custom filtering, sorting and grouping to the Comment Sidebar
- Add custom actions to each item in the Notifications panel.
- Add custom actions to the Comment Dialog.
- In the callback event, in addition to returning the button context, it also returns the key component data that it sits within Eg:
CommentAnnotation
,Comment
,Notification
,CommentSidebarData
etc.
Types
button
: Basic clickable buttonbutton-toggle
: Toggleable button that maintains statesingle-select
: Single select (radio button) groupmulti-select
: Multi select (checkbox) group
Component Props
Property | Type | Required | Description |
---|---|---|---|
id | string | Yes | Unique identifier for the button |
type | string | No | Button type: ‘button’ (default), ‘button-toggle’, ‘multi-select’, or ‘single-select’ |
disabled | boolean | No | Whether the button is disabled |
active | boolean | No | Whether the button is in active/selected state. Use this if you want to add a default state to the button. Applies to ‘button-toggle’, ‘multi-select’, or ‘single-select’ buttons. |
group | string | No | Group identifier for single-select/multi-select buttons |
Usage
Button
<VeltWireframe>
<VeltCommentsSidebarWireframe.Header>
<VeltCommentsSidebarWireframe.Search />
<VeltCommentsSidebarWireframe.FilterButton />
<VeltButtonWireframe id="close-sidebar" type="button">
<div className="custom-button">Close Sidebar</div>
</VeltButtonWireframe>
</VeltCommentsSidebarWireframe.Header>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext.clickedButtonId === 'close-sidebar') {
// Close sidebar
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext.clickedButtonId === 'close-sidebar') {
// Close sidebar
}
}
});
<VeltWireframe>
<VeltCommentsSidebarWireframe.Header>
<VeltCommentsSidebarWireframe.Search />
<VeltCommentsSidebarWireframe.FilterButton />
<VeltButtonWireframe id="close-sidebar" type="button">
<div className="custom-button">Close Sidebar</div>
</VeltButtonWireframe>
</VeltCommentsSidebarWireframe.Header>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext.clickedButtonId === 'close-sidebar') {
// Close sidebar
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext.clickedButtonId === 'close-sidebar') {
// Close sidebar
}
}
});
<velt-wireframe style="display:none;">
<velt-comments-sidebar-wireframe-header>
<velt-comments-sidebar-wireframe-search></velt-comments-sidebar-wireframe-search>
<velt-comments-sidebar-wireframe-filter-button></velt-comments-sidebar-wireframe-filter-button>
<velt-button-wireframe id="close-sidebar" type="button">
<div class="custom-button">Close Sidebar</div>
</velt-button-wireframe>
</velt-comments-sidebar-wireframe-header>
</velt-wireframe>
Handle the button click event:
Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext.clickedButtonId === 'close-sidebar') {
// Close sidebar
}
}
});
Button Toggle
<VeltWireframe>
<VeltCommentsSidebarWireframe.Header>
<VeltCommentsSidebarWireframe.Search />
<VeltCommentsSidebarWireframe.FilterButton />
{/* Optional: Set the active prop to true if you want to add a default state to the button */}
<VeltButtonWireframe id="toggleCommentPins" type="button-toggle" active={true}>
<div className="custom-button">Toggle Comment Pins</div>
</VeltButtonWireframe>
</VeltCommentsSidebarWireframe.Header>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.clickedButtonId === 'toggleCommentPins') {
if (veltButtonClickEventData.buttonContext?.selections?.ungrouped['toggleCommentPins']) {
commentElement.showCommentsOnDom();
} else {
commentElement.hideCommentsOnDom();
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.clickedButtonId === 'toggleCommentPins') {
if (veltButtonClickEventData.buttonContext?.selections?.ungrouped['toggleCommentPins']) {
commentElement.showCommentsOnDom();
} else {
commentElement.hideCommentsOnDom();
}
}
}
});
<VeltWireframe>
<VeltCommentsSidebarWireframe.Header>
<VeltCommentsSidebarWireframe.Search />
<VeltCommentsSidebarWireframe.FilterButton />
{/* Optional: Set the active prop to true if you want to add a default state to the button */}
<VeltButtonWireframe id="toggleCommentPins" type="button-toggle" active={true}>
<div className="custom-button">Toggle Comment Pins</div>
</VeltButtonWireframe>
</VeltCommentsSidebarWireframe.Header>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.clickedButtonId === 'toggleCommentPins') {
if (veltButtonClickEventData.buttonContext?.selections?.ungrouped['toggleCommentPins']) {
commentElement.showCommentsOnDom();
} else {
commentElement.hideCommentsOnDom();
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.clickedButtonId === 'toggleCommentPins') {
if (veltButtonClickEventData.buttonContext?.selections?.ungrouped['toggleCommentPins']) {
commentElement.showCommentsOnDom();
} else {
commentElement.hideCommentsOnDom();
}
}
}
});
<velt-wireframe style="display:none;">
<velt-comments-sidebar-wireframe-header>
<velt-comments-sidebar-wireframe-search></velt-comments-sidebar-wireframe-search>
<velt-comments-sidebar-wireframe-filter-button></velt-comments-sidebar-wireframe-filter-button>
<!-- Optional: Set the active prop to true if you want to add a default state to the button -->
<velt-button-wireframe id="toggleCommentPins" type="button-toggle" active="true">
<div class="custom-button">Toggle Comment Pins</div>
</velt-button-wireframe>
</velt-comments-sidebar-wireframe-header>
</velt-wireframe>
Handle the button click event:
Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.clickedButtonId === 'toggleCommentPins') {
if (veltButtonClickEventData.buttonContext?.selections?.ungrouped['toggleCommentPins']) {
commentElement.showCommentsOnDom();
} else {
commentElement.hideCommentsOnDom();
}
}
}
});
Single Select Button Group
<VeltWireframe>
<VeltCommentsSidebarWireframe.Panel>
<VeltCommentsSidebarWireframe.Header />
<div className="custom-filter-chip-container">
<VeltButtonWireframe id="unread" type="single-select" group="custom-filter">
<div className="custom-filter-chip-button">Unread</div>
</VeltButtonWireframe>
<VeltButtonWireframe id="mentions" type="single-select" group="custom-filter">
<div className="custom-filter-chip-button">Mentions</div>
</VeltButtonWireframe>
</div>
</VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selectedFilter = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selectedFilter?.unread) {
// show unread comments
} else if (selectedFilter?.mentions) {
// show comments with mentions
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selectedFilter = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selectedFilter?.unread) {
// show unread comments
} else if (selectedFilter?.mentions) {
// show comments with mentions
}
}
}
});
<VeltWireframe>
<VeltCommentsSidebarWireframe.Panel>
<VeltCommentsSidebarWireframe.Header />
<div className="custom-filter-chip-container">
<VeltButtonWireframe id="unread" type="single-select" group="custom-filter">
<div className="custom-filter-chip-button">Unread</div>
</VeltButtonWireframe>
<VeltButtonWireframe id="mentions" type="single-select" group="custom-filter">
<div className="custom-filter-chip-button">Mentions</div>
</VeltButtonWireframe>
</div>
</VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selectedFilter = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selectedFilter?.unread) {
// show unread comments
} else if (selectedFilter?.mentions) {
// show comments with mentions
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selectedFilter = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selectedFilter?.unread) {
// show unread comments
} else if (selectedFilter?.mentions) {
// show comments with mentions
}
}
}
});
<velt-wireframe style="display:none;">
<velt-comments-sidebar-wireframe-panel>
<velt-comments-sidebar-wireframe-header></velt-comments-sidebar-wireframe-header>
<div class="custom-filter-chip-container">
<velt-button-wireframe id="unread" type="single-select" group="custom-filter">
<div class="custom-filter-chip-button">Unread</div>
</velt-button-wireframe>
<velt-button-wireframe id="mentions" type="single-select" group="custom-filter">
<div class="custom-filter-chip-button">Mentions</div>
</velt-button-wireframe>
</div>
</velt-comments-sidebar-wireframe-panel>
</velt-wireframe>
Handle the button click event:
Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selectedFilter = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selectedFilter?.unread) {
// show unread comments
} else if (selectedFilter?.mentions) {
// show comments with mentions
}
}
}
});
Multi Select Button Group
<VeltWireframe>
<VeltCommentsSidebarWireframe.Panel>
<VeltCommentsSidebarWireframe.Header />
<div className="custom-filter-chip-container">
<VeltButtonWireframe id="unread" type="multi-select" group="custom-filter">
<div className="custom-filter-chip-button">Unread</div>
</VeltButtonWireframe>
<VeltButtonWireframe id="mentions" type="multi-select" group="custom-filter">
<div className="custom-filter-chip-button">Mentions</div>
</VeltButtonWireframe>
</div>
</VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selections?.unread) {
// show unread comments
}
if (selections?.mentions) {
// show comments with mentions
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selections?.unread) {
// show unread comments
}
if (selections?.mentions) {
// show comments with mentions
}
}
}
});
<VeltWireframe>
<VeltCommentsSidebarWireframe.Panel>
<VeltCommentsSidebarWireframe.Header />
<div className="custom-filter-chip-container">
<VeltButtonWireframe id="unread" type="multi-select" group="custom-filter">
<div className="custom-filter-chip-button">Unread</div>
</VeltButtonWireframe>
<VeltButtonWireframe id="mentions" type="multi-select" group="custom-filter">
<div className="custom-filter-chip-button">Mentions</div>
</VeltButtonWireframe>
</div>
</VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>
Handle the button click event:
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selections?.unread) {
// show unread comments
}
if (selections?.mentions) {
// show comments with mentions
}
}
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selections?.unread) {
// show unread comments
}
if (selections?.mentions) {
// show comments with mentions
}
}
}
});
<velt-wireframe style="display:none;">
<velt-comments-sidebar-wireframe-panel>
<velt-comments-sidebar-wireframe-header></velt-comments-sidebar-wireframe-header>
<div class="custom-filter-chip-container">
<velt-button-wireframe id="unread" type="multi-select" group="custom-filter">
<div class="custom-filter-chip-button">Unread</div>
</velt-button-wireframe>
<velt-button-wireframe id="mentions" type="multi-select" group="custom-filter">
<div class="custom-filter-chip-button">Mentions</div>
</velt-button-wireframe>
</div>
</velt-comments-sidebar-wireframe-panel>
</velt-wireframe>
Handle the button click event:
Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
if (veltButtonClickEventData) {
if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
if (selections?.unread) {
// show unread comments
}
if (selections?.mentions) {
// show comments with mentions
}
}
}
});
Callback Event
The Velt Button Wireframe emits events when users interact with it. You can listen to these events to implement custom behaviors.
- Returns: VeltButtonClickEvent
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
// Handle button click event response
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe((veltButtonClickEventData) => {
// Handle button click event response
});
// Hook
const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
if (veltButtonClickEventData) {
// Handle button click event response
}
}, [veltButtonClickEventData]);
// API Method
client.on('veltButtonClick').subscribe((veltButtonClickEventData) => {
// Handle button click event response
});
Velt.on('veltButtonClick').subscribe((veltButtonClickEventData) => {
// Handle button click event response
});
Was this page helpful?