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>

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