- 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. This can be a static id or a dynamic id using a template variable. |
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
Button Toggle
Single Select Button Group
Multi Select Button Group
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
Set Dynamic ID to Velt Button
- You can use template variables to set the id.
Reset Velt Button State
- Reset the state of Velt Button components programmatically.
- Params: (optional) VeltResetButtonStateConfig