;
}
};
**Bring your own drag-and-drop interactions.**
While these components are intended to help you create drag and drop experiences that align with our designs, they do not provide the actual drag-and-drop interactions. You should evaluate external libraries make the best choice for your needs.
## Common Examples
```tsx theme={null}
import { Dnd } from "@servicetitan/anvil2";
```
### Zone
The `Dnd.Zone` can be used to style an element as a drop zone.
```tsx lines expandable theme={null}
import { Dnd } from "@servicetitan/anvil2";
function App() {
return your content here;
}
export default App;
```
### Handle
The `Dnd.Handle` is an icon which helps users understand that something is draggable.
```tsx lines expandable theme={null}
import { Dnd } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Handle Button
The `Dnd.HandleButton` is a button-wrapped icon which helps users understand that something is draggable. Use this if your draggable item contains other interactive elements.
```tsx lines expandable theme={null}
import { Dnd } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Sort Line
The `Dnd.SortLine` indicates where an item will be dropped in a sortable list.
The width of the line is based upon its nearest relatively positioned ancestor.
This component should be used when you're building an experience that is sortable in one dimension (i.e. vertical or horizontal lists). It is not suitable for sorting two-dimensional sorting (e.g. grids).
```tsx lines expandable theme={null}
import { Dnd } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### DndSort
If you're not looking to create your own entire drag and drop solution, check to see if `DndSort` is capable of supporting your needs. It's a pre-built composition that uses all of these `Dnd` components to cover many basic cases including: sorting a list, arranging items into groups, or both. Read more about that component [here](/docs/web/components/dnd-sort/code).
## Best Practices
### Draggables with interactivity
```tsx lines expandable theme={null}
import { Dnd, Card, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Do**
If your draggable item has interactive elements, use the Dnd.HandleButton to initiate dragging.
```tsx lines expandable theme={null}
import { Dnd, Card, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Don't**
If your draggable item has interactive elements, don't nest interactive elements.
```tsx theme={null}
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
{/* Zone content */}
); }
```
## `Dnd.Zone` Props
Whether an item is currently being dragged.
Whether an item is currently being dragged over the zone.
Whether the current drag operation is valid for this zone.
Child elements to render inside the zone.
Optional CSS class name to apply to the zone.
The HTML element type to render.
All props for the specified element type are also supported.
```tsx theme={null}
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
## `Dnd.Handle` Props
Optional CSS class name to apply to the handle
```tsx theme={null}
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
## `Dnd.HandleButton` Props
In addition to the props listed below, the `Dnd.HandleButton` component can accept any [`ButtonCompound`](/docs/web/components/button/design#anatomy) props.
Optional CSS class name to apply to the button
Whether the handle is currently being dragged
```tsx theme={null}
import { Dnd } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
## `Dnd.SortLine` Props
In addition to the props listed below, the `Dnd.SortLine` component can accept any valid HTML `div` props.
The offset of the line from the item (CSS value, typically negative)
The orientation of the sort - Note: line is rendered perpendicular to the sort
The position of the line relative to a target item
