Components Destructive actions

Destructive actions

The destructive-actions block at the bottom of an entity detail page (View Quote / Transaction / Partner / Branch). A calm surface-recessed panel with a neutral border-outline hairline — so it reads as a defined panel in both light and dark, with no alarming red fill — holding a hairline-divided list of <koala-destructive-action> rows, each a title + description with the destructive control (a Danger outlined button or tray link) on the right. No heading: the danger signal is each row's outlined button and its confirm step.

<koala-destructive-actions>

Canonical — one action

Disable this partner

Hides this partner from everyone, including admins, until you re-enable it.

<koala-destructive-actions>
    <koala-destructive-action title="Disable this partner"
                              description="Hides this partner from everyone, including admins, until you re-enable it."
                              action-label="Disable partner" on-click="confirmOpen = true" />
</koala-destructive-actions>

Multiple actions (hairline-divided)

Cancel this quote

Cancels the quote and stops further action.

Delete this quote

Removes this quote and every earlier revision.

<koala-destructive-actions>
    <koala-destructive-action title="Cancel this quote"
                              description="Cancels the quote and stops further action."
                              action-label="Cancel quote" on-click="confirmOpen = true" />
    <koala-destructive-action title="Delete this quote"
                              description="Removes this quote and every earlier revision."
                              action-label="Delete quote" on-click="deleteOpen = true" />
</koala-destructive-actions>

Action as a tray link

Disable this branch

Stops new work being routed to this branch and hides it from team selection.

Disable branch

<koala-destructive-actions>
    <koala-destructive-action title="Disable this branch"
                              description="Stops new work being routed to this branch and hides it from team selection."
                              action-label="Disable branch" href="@disableUrl" tray="true" />
</koala-destructive-actions>

Props

7 attributes

<koala-destructive-actions> — the panel.

Attribute	Values	Notes
class	Tailwind classes	Replaces the default outer spacing (`mt-8`) on the wrapping div — pass `class=""` to drop it.

<koala-destructive-action> — one row. The destructive control is rendered by the helper (always the Danger outlined button, compact size) so its styling can't drift.

Attribute	Values	Notes
title	string	Required. The row heading — "<verb> this <entity>", e.g. "Disable this partner".
description	string	Muted one-liner under the title spelling out the consequence.
action-label	string	Required. Label on the Danger outlined control.
on-click	Alpine expression	Renders the control as a `<button>` with this `x-on:click` handler — typically opens the page's confirm modal.
href	URL	Renders the control as an `<a>` instead of a button. Mutually exclusive with `on-click`.
tray	bool	With `href`, opens the target in the side tray (adds the `koala-tray-link` wiring).

Do & don't

Disable this partner

Hides this partner from everyone until you re-enable it.

Do The calm surface-recessed panel with a neutral hairline. The danger signal is each row's Danger outlined button plus its confirm step alone.

Disable this partner

Hides this partner from everyone until you re-enable it.

Don't Don't hand-roll a border-danger block or a red-tinted panel — an alarming red surface shouts before the user has done anything, and copy-pasted blocks drift.