πŸ”’ Deprovision Button

An unstyled button for deprovisioning resources. πŸ”’ Requires authentication.

CTA text

Set the CTA text by adding anything between the opening and closing tags:

<manifold-data-deprovision-button resource-label="my-resource">
  Deprovision My Resource
</manifold-data-provision-button>

slot can be attached to any HTML or JSX element. To read more about slots, see Stencil’s Documentation

Events

For validation, error, and success messages, it will emit custom events.

document.addEventListener('manifold-deprovisionButton-click', ({ detail: { resourceLabel } }) =>
  console.info(`βŒ› Deprovisioning ${resourceLabel} …`)
);
document.addEventListener(
  'manifold-deprovisionButton-success',
  ({ detail: { resourceLabel } }) =>alert(`${resourceLabel} deprovisioned successfully!`)
);
document.addEventListener('manifold-deprovisionButton-error', ({ detail }) => console.log(detail));
// {message: "bad_request: bad_request: No plan_id provided", resourceid: "1234", resourceLabel: "my-resource"}
Name Returns Description
manifold-deprovisionButton-click resourceLabel Fires immediately when button is clicked. May be used to trigger a loading state, until -success or -error is received.
manifold-deprovisionButton-success message, resourceId, resourceLabel Successful deprovision. Returns a resource ID and resource Label.
manifold-deprovisionButton-error message, resourceId, resourceLabel Erred provision, along with information on what went wrong.

Styling

Whereas other components in this system take advantage of Shadow DOM encapsulation for ease of use, we figured this component should be customizable. As such, style it however you’d like! We recommend attaching styles to a parent element using any CSS-in-JS framework of your choice, or plain ol’ CSS.

Example

Deprovison resource