Button

Displays a button or a component that looks like a button.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add button

import { component$, type PropsOf, Slot } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { cva, type VariantProps } from 'class-variance-authority';
 
export const buttonVariants = cva(
  'inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      look: {
        primary:
          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:shadow-base active:press',
        secondary:
          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:shadow-base active:press',
        alert:
          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:shadow-base active:press',
        outline:
          'border bg-background text-foreground shadow-sm hover:bg-accent active:shadow-base active:press',
        ghost: 'text-accent-foreground hover:bg-accent',
        link: 'text-foreground hover:bg-transparent hover:text-foreground/80 hover:underline hover:underline-offset-2',
      },
      size: {
        sm: 'h-8 px-2 py-1.5 text-sm',
        md: 'h-12 px-4 py-3 text-base',
        lg: ' h-16 px-8 py-4 text-lg',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      look: 'primary',
      size: 'md',
    },
  },
);
 
type ButtonProps = PropsOf<'button'> & VariantProps<typeof buttonVariants>;
 
export const Button = component$<ButtonProps>(({ size, look, ...props }) => {
  return (
    <button {...props} class={cn(buttonVariants({ size, look }), props.class)}>
      <Slot />
    </button>
  );
});

Examples

Primary

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="primary">Primary</Button>
    </>
  );
});

Secondary

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="secondary">Secondary</Button>
    </>
  );
});

Alert

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="alert">Alert</Button>
    </>
  );
});

Outline

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="outline">Outline</Button>
    </>
  );
});

Ghost

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="ghost">Ghost</Button>
    </>
  );
});

Link

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button look="link">Link</Button>
    </>
  );
});

Large and Small

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';

export default component$(() => {
  return (
    <>
      <Button size="sm">Button</Button>
      <Button>Button</Button>
      <Button size="lg">Button</Button>
    </>
  );
});

Icon

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';
import { LuGithub } from '@qwikest/icons/lucide';

export default component$(() => {
  return (
    <Button size="icon">
      <LuGithub />
    </Button>
  );
});

With Icon

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';
import { LuMail } from '@qwikest/icons/lucide';

export default component$(() => {
  return (
    <Button>
      <LuMail class="mr-2" /> Login with Email
    </Button>
  );
});

Loading

import { component$ } from '@builder.io/qwik';
import { Button } from '~/components/ui';
import { LuLoader2 } from '@qwikest/icons/lucide';

export default component$(() => {
  return (
    <Button disabled>
      <LuLoader2 class="mr-2 h-5 w-5 animate-spin" /> Login with Email
    </Button>
  );
});