Skip to main content

​
Button

The Button component provides an interactive element with various visual styles, custom color support, and action handling.

​
Props

PropTypeDefaultDescription
labelstring-Button text
variantstring"primary"Style variant: primary, secondary, outline, ghost, danger
sizestring"md"Button size: sm, md, lg, xl
colorstring-Custom background color (overrides variant)
textColorstring-Custom text color
borderColorstring-Custom border color
borderWidthnumber-Custom border width
radiusstring | number-Border radius: none, sm, md, lg, xl, full, or number
shadowstring"none"Shadow depth: none, sm, md, lg
iconstring-Icon name on the left
iconStartstring-Icon name on the left (alias)
iconEndstring-Icon name on the right
iconRightstring-Icon name on the right (alias)
disabledbooleanfalseDisabled state
loadingbooleanfalseLoading state with spinner
fullWidthbooleanfalseWhether button fills available width
blockbooleanfalseAlias for fullWidth
uniformbooleanfalseSquare/circular button (equal width and height)
pillbooleanfalseFully rounded corners
alignstring"auto"Button alignment: auto, start, center, end, stretch
actionobject-Action to execute on click
onClickActionobject-Alias for action
messagestring-Simple message to send on click

​
Variants

  • "primary" - Primary action button (filled with brand color)
  • "secondary" - Secondary action (subtle background)
  • "outline" - Outlined button with transparent background
  • "ghost" - Minimal style (text only, transparent)
  • "danger" - Destructive action (red/error color)

​
Sizes

  • "sm" - Small button (padding: 8/14, font: 13px)
  • "md" - Medium button (padding: 12/18, font: 15px) - default
  • "lg" - Large button (padding: 16/24, font: 17px)
  • "xl" - Extra large button (padding: 18/28, font: 18px)

​
Examples

​
Basic Buttons

<Button label="Submit" variant="primary" />
<Button label="Cancel" variant="secondary" />
<Button label="Delete" variant="danger" />
<Button label="Learn More" variant="ghost" />
<Button label="Sign Up" variant="outline" />

​
Custom Colors

{/* Custom background and text color */}
<Button label="Custom" color="#8B5CF6" textColor="#FFFFFF" />

{/* Custom with shadow */}
<Button label="Elevated" color="#10B981" shadow="md" />

{/* Custom border */}
<Button
  label="Bordered"
  variant="outline"
  borderColor="#F59E0B"
  textColor="#F59E0B"
/>

​
With Icons

<Button label="Add Item" icon="plus" variant="primary" />
<Button label="Download" iconEnd="download" variant="secondary" />
<Button icon="settings" uniform />

​
Sizes

<Row gap="md">
  <Button label="Small" size="sm" />
  <Button label="Medium" size="md" />
  <Button label="Large" size="lg" />
  <Button label="Extra Large" size="xl" />
</Row>

​
Shape Variants

{/* Pill shape (fully rounded) */}
<Button label="Pill Button" pill />

{/* Uniform (square/circular) */}
<Button icon="plus" uniform />

{/* Uniform pill (circular) */}
<Button icon="heart" uniform pill />

​
Loading State

<Button label="Saving..." loading variant="primary" />

​
Full Width

<Button label="Continue" fullWidth />
{/* or */}
<Button label="Continue" block />

​
With Actions

{/* Send a message */}
<Button
  label="Submit"
  action={{
    type: "lyzn.sendMessage",
    payload: { message: "Form submitted" }
  }}
/>

{/* Simple message shorthand */}
<Button label="Say Hello" message="Hello!" />

{/* Show toast */}
<Button
  label="Save"
  action={{
    type: "lyzn.showToast",
    payload: { message: "Saved!", type: "success" }
  }}
/>

{/* Open link */}
<Button
  label="Visit Website"
  action={{
    type: "lyzn.openLink",
    payload: { url: "https://example.com", external: true }
  }}
/>

​
Button Groups

<Row gap="md" justify="end">
  <Button label="Cancel" variant="ghost" />
  <Button label="Save" variant="primary" />
</Row>

​
Aligned Buttons

<Col gap="md">
  <Button label="Start" align="start" />
  <Button label="Center" align="center" />
  <Button label="End" align="end" />
</Col>

​
Common Patterns

​
Form Actions

<Card>
  <Col gap="md">
    <Input name="email" label="Email" type="email" />
    <Row gap="md" justify="end">
      <Button label="Cancel" variant="secondary" />
      <Button
        label="Submit"
        variant="primary"
        action={{ type: "lyzn.sendMessage" }}
      />
    </Row>
  </Col>
</Card>

​
Confirmation Dialog

<Card>
  <Col gap="md">
    <Title value="Delete Item?" />
    <Text value="This action cannot be undone." color="muted" />
    <Row gap="md" justify="end">
      <Button label="Cancel" variant="ghost" />
      <Button
        label="Delete"
        variant="danger"
        icon="trash"
        action={{ type: "lyzn.sendMessage", payload: { message: "Confirmed delete" }}}
      />
    </Row>
  </Col>
</Card>

​
Icon-Only Toolbar

<Row gap="sm">
  <Button icon="bold" uniform variant="ghost" />
  <Button icon="italic" uniform variant="ghost" />
  <Button icon="underline" uniform variant="ghost" />
  <Divider direction="vertical" />
  <Button icon="list" uniform variant="ghost" />
  <Button icon="link" uniform variant="ghost" />
</Row>