Changelog

Button Components

Buttons are essential interaction elements within the software. They serve for navigation, confirmation, or executing various actions.

Primary Button

luis-btn-primary

For the primary action in a group of buttons, e.g., for saving a form. A primary button draws attention. There should always be only one primary button in a button group!

import { Button } from '@luis/react';

function Example() {
  return (
    <Button variant="primary">
      Primary Button
    </Button>
  );
}
<button class="luis-btn luis-btn-primary">
  Primary Button
</button>

Secondary Button

luis-btn-secondary

For general actions and secondary operations.

import { Button } from '@luis/react';

function Example() {
  return (
    <Button variant="secondary">
      Secondary Button
    </Button>
  );
}
<button class="luis-btn luis-btn-secondary">
  Secondary Button
</button>

Disabled States

Buttons that cannot be interacted with due to current state or permissions.

import { Button } from '@luis/react';

function Example() {
  return (
    <>
      <Button variant="primary" disabled>
        Disabled Primary
      </Button>
      <Button variant="secondary" disabled>
        Disabled Secondary
      </Button>
    </>
  );
}
<button class="luis-btn luis-btn-primary" disabled>
  Disabled Primary
</button>

<button class="luis-btn luis-btn-secondary" disabled>
  Disabled Secondary
</button>

Button as Link

Buttons can also be used as links for navigation purposes.

import { Button } from '@luis/react';

function Example() {
  return (
    <>
      <Button as="a" href="#" variant="primary">
        Primary Link
      </Button>
      <Button as="a" href="#" variant="secondary">
        Secondary Link
      </Button>
    </>
  );
}
<a href="#" class="luis-btn luis-btn-primary">
  Primary Link
</a>

<a href="#" class="luis-btn luis-btn-secondary">
  Secondary Link
</a>

Button Sizes

Different button sizes for various use cases.

import { Button } from '@luis/react';

function Example() {
  return (
    <>
      <Button size="small" variant="primary">
        Small
      </Button>
      <Button size="medium" variant="primary">
        Medium
      </Button>
      <Button size="large" variant="primary">
        Large
      </Button>
    </>
  );
}
<button class="luis-btn luis-btn-primary luis-btn-small">
  Small
</button>

<button class="luis-btn luis-btn-primary">
  Medium
</button>

<button class="luis-btn luis-btn-primary luis-btn-large">
  Large
</button>