Action panels

Card-style panels with a title, description, and an action slot (button, link, toggle, or inline form).

Preview

Manage subscription

Adjust your billing plan at any time. Upgrades take effect immediately; downgrades apply at the end of the current cycle.

Continuous Integration

Run your tests automatically on every push and pull request. Configure providers in settings.

Learn more about our CI features

Renew subscription automatically

Toggle off to cancel renewal at the end of your current billing period.

Update your email

Change the email address associated with your account.

Need more bandwidth?

Contact our sales team for enterprise pricing on annual data transfer plans.

React preview

LiveView (HEEx) 

alias DesignSystem.UI.{ActionPanels, Buttons}

<ActionPanels.action_panel title="Manage subscription">
  <:description>
    <p>Adjust your billing plan at any time.</p>
  </:description>
  <:actions>
    <Buttons.button>Change plan</Buttons.button>
  </:actions>
</ActionPanels.action_panel>

<ActionPanels.action_panel
  title="Renew subscription automatically"
  layout="right"
>
  <:description><p>Toggle off to cancel.</p></:description>
  <:actions>
    <FormInputs.toggle id="renew" name="renew" checked />
  </:actions>
</ActionPanels.action_panel>

<ActionPanels.action_panel title="Need more bandwidth?" variant="well">
  <:description><p>Contact sales for enterprise pricing.</p></:description>
  <:actions>
    <Buttons.button variant="secondary">Contact sales</Buttons.button>
  </:actions>
</ActionPanels.action_panel>

React (JSX) 

import { ActionPanel, Button, Toggle } from "../ui/index.mjs"

<ActionPanel
  title="Manage subscription"
  description={<p>Adjust your billing plan at any time.</p>}
  actions={<Button>Change plan</Button>}
/>

<ActionPanel
  title="Renew subscription automatically"
  layout="right"
  description={<p>Toggle off to cancel.</p>}
  actions={<Toggle checked={on} onChange={setOn} />}
/>

<ActionPanel
  title="Need more bandwidth?"
  variant="well"
  description={<p>Contact sales.</p>}
  actions={<Button variant="secondary">Contact sales</Button>}
/>