The button handle component is used to act as a handle to drag and move an element, such as a slidebar or a modal window. The component should have a clear and descriptive label that communicates its purpose, such as "Drag to move" or "Move handle".
Example
code
<script type="module">
import '@blueprintui/components/include/button-handle.js';
</script>
<bp-button-handle aria-label="move item"></bp-button-handle>
Disabled
code
<script type="module">
import '@blueprintui/components/include/button-handle.js';
</script>
<bp-button-handle disabled aria-label="move item"></bp-button-handle>
The disabled
attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.
Install
NPM
import '@blueprintui/components/include/button-handle.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-handle.js/+esm';
</script>
Accessibility
- Use a clear, descriptive label for the button that communicates its purpose.
- Provide a way for keyboard users to interact with the button handle, such as using the enter or space key.
- Provide alternative ways for users who have difficulty using a mouse or trackpad to move the handle, such as by using the arrow keys.
Properties
Name | Types | Description |
---|
accessor |
| determines the current value |
shape | string | |
direction | 'up' | 'down' | 'left' | 'right' | |
pressed | boolean | |
selected | boolean | |
expanded | boolean | |
readonly | boolean | |
disabled | boolean | |
type | 'button' | 'submit' | |
name | string | represents the name of the current |
value | string | |
popoverTargetElement | HTMLElement | |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | |
popovertarget | string | |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean | |
Attributes
Name | Types | Description |
---|
accessor |
| determines the current value |
popovertargetaction |
| determines the current value |
popovertarget |
| determines the current value |
CSS Properties
Name | Types | Description |
---|
--cursoe |
| |
--icon-width |
| |
--icon-height |
| |
Slots
Name | Types | Description |
---|
default |
| slot for text content or bp-icon |