Button Handle

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

<script type="module">
  import '@blueprintui/components/include/button-handle.js';
</script>

<bp-button-handle aria-label="move item"></bp-button-handle>

Disabled

<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

// npm package
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.

bp-button-handle

Properties

Attributes

CSS Properties

Slots