No Results Found
Draggables are items that can be moved about the interface. Customers use this pattern to add and reorder elements to fit their needs.
Insight
Draggable items are recognizable by their vertical lines within the component. They provide affordance that they can be dragged and moved.<div class="draggables">
<a href="#" class="btn--draggable" role="button">Draggable</a>
</div>
The default style for draggable buttons uses the tertiary color.
<div class="draggables">
<a href="#" class="btn--draggable btn--disabled" role="button">Draggable Disabled</a>
</div>
When a draggable item cannot be interacted with we add a btn--disabled
class.
<div class="draggables draggables--sticky">
<a href="#" class="btn--draggable" role="button">Screener Question</a>
</div>
Given the nature of the dragging interface some items may go below the view of the window. Apply the draggables--sticky
class to ensure that the Draggable element is always in view.
<div class="draggables">
<a href="#" class="btn--draggable" role="button">Screener Question
<tk-icon class="mr-auto ml-2x t-link"
name="question-mark-circle"
size="small">
</tk-icon>
</a>
</div>
<div class="draggables">
<a href="#" class="btn--draggable btn--locked" role="button" aria-label="locked feature">
Screener Question
<tk-icon name="lock" size="small"></tk-icon>
</a>
</div>
Draggables may offer complex choices and interactions. Adding icons helps to educate customers on what they can do with draggables and how they can access them. Lock icon denotes access to feature. Read more about lock icons in buttons.
Insight
The “question mark” icon triggers a modal further explaining the draggable option.:focus
Receives :focus
When clicked, the new element created should receive :focus