Appearance

Quick Actions ​

A clickable call-to-action component that is more obvious than a regular button or link.

Basic Usage ​

Title example

Subtitle example

vue
<QuickAction to="#" title="Title example" subtitle="Subtitle example" icon="mj-leaf" />

Playground ​

Title

Subtitle

Quick Action Grid ​

You can display multiple quick actions in a custom grid layout to your liking.

Send ACH

Available next business day

Send Wire

Available within 1 business day

Transfer Funds

Move money between your accounts

vue
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-x-6 tw-gap-y-6">
  <QuickAction to="#" icon="circle-dollar" title="Send ACH" subtitle="Available next business day" />
  <QuickAction to="#" icon="truck" title="Send Wire" subtitle="Available within 1 business day" />
  <QuickAction to="#" icon="swap-horizontal" title="Transfer Funds" subtitle="Move money between your accounts" />
</div>

If you need the quick action to open an external link, you can use the href prop rather than the to prop. This will open the link in the same tab by default. You can also use the target="_blank" prop to open the link in a new tab by providing the value _blank to the target prop.

External Link

Subtitle example

External Link in new tab

Subtitle example

vue
<QuickAction href="https://www.leaflink.com" title="External Link" subtitle="Subtitle example" icon="link" />
<QuickAction href="https://www.leaflink.com" title="External Link in new tab" subtitle="Subtitle example" icon="open-in-new" target="_blank" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.