The action bar offers users quick access to primary actions within the application.
It is typically positioned to float above other content.
<.action_bar>
<:item label="Edit" on_click={JS.push("edit")}>
<.icon><Lucideicons.pencil aria-hidden /></.icon>
</:item>
<:item label="Move" on_click={JS.push("move")}>
<.icon><Lucideicons.move aria-hidden /></.icon>
</:item>
<:item label="Archive" on_click={JS.push("archive")}>
<.icon><Lucideicons.archive aria-hidden /></.icon>
</:item>
</.action_bar>
<.action_bar> <:item label="Edit" on_click={JS.push("edit")}> <.icon><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil" aria-hidden="true" > <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /> </svg> </.icon> </:item> <:item label="Move" on_click={JS.push("move")}> <.icon><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-right" aria-hidden="true" > <path d="M18 8L22 12L18 16" /><path d="M2 12H22" /> </svg> </.icon> </:item> <:item label="Archive" on_click={JS.push("archive")}> <.icon><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-archive" aria-hidden="true" > <rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" /> </svg> </.icon> </:item> </.action_bar>