Button

Triggers an action. Renders the Rocketlane Button inside a custom element.

<rl-button variant="primary">Button</rl-button>
<rl-button variant="secondary">Button</rl-button>

Usage

Use rl-button after rliSdk.init(). Listen for the native click event that bubbles from the inner button.

tsx

<rl-button variant="primary" onClick={() => console.log("saved")}>
Save
</rl-button>

<rl-button variant="primary">Primary</rl-button>

<rl-button variant="secondary">Secondary</rl-button>

<rl-button variant="ghost">Ghost</rl-button>

<rl-button variant="danger">Delete</rl-button>

Use the size attribute.

<rl-button size="small">Small</rl-button>
<rl-button size="medium">Medium</rl-button>
<rl-button size="large">Large</rl-button>

<rl-button variant="primary" disabled>Disabled</rl-button>

<rl-button variant="primary" loading>Saving</rl-button>

tsx

<rl-button
variant="primary"
onClick={() => {
  // runs when the button is activated
}}
>
Save
</rl-button>

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "link" \| "success" \| "danger" \| "tertiary" \| "ai" \| …`	`"secondary"`	Visual style.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Control height.
`disabled`	`boolean`	`false`	Prevents interaction.
`loading`	`boolean`	`false`	Shows a loading state.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type.

Event	Type	Description
`click`	`MouseEvent`	Bubbles from the inner button when activated. Use React `onClick` on the host, or `addEventListener("click", …)` in Vanilla JS.

On This Page