<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 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"
/>

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

<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>

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

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

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

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

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

{/* 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 }
  }}
/>

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

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

<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>

<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>

<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>