Button

Usage

buttons.tsx

import { Button } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Buttons() {
  return (
    <div>
      <Button>Click Me</Button>
      <Button variant="secondary" size="icon_medium">
        <RiHome2Fill />
      </Button>
    </div>
  );
}

Props

The component renders a <button> element, so all native button props are supported.

Prop

Type

Examples

Variants

variants.tsx

import { Button } from "@uj-vilag/dap-components";

export default function Variants() {
  return (
    <div>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="subtle_neutral">Subtle Neutral</Button>
      <Button variant="primary_inverted">Primary Inverted</Button>
      <Button variant="subtle" quiet>
        Subtle quiet
      </Button>
      <Button variant="subtle_neutral" quiet>
        Subtle Neutral quiet
      </Button>
    </div>
  );
}

Not all variants from the design system are available just yet. More coming soon!

Sizes

sizes.tsx

import { Button } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Sizes() {
  return (
    <div>
      <div>
        <Button size="large">Large</Button>
        <Button size="medium">Medium</Button>
        <Button size="small">Small</Button>
        <Button size="xSmall">xSmall</Button>
      </div>
      <div>
        <Button size="icon_large">
          <RiHome2Fill />
        </Button>
        <Button size="icon_medium">
          <RiHome2Fill />
        </Button>
        <Button size="icon_small">
          <RiHome2Fill />
        </Button>
        <Button size="icon_xSmall">
          <RiHome2Fill />
        </Button>
      </div>
    </div>
  );
}

With Icon

icons.tsx

import { Button } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Icons() {
  return (
    <div>
      <Button size="medium" variant="primary">
        <RiHome2Fill />
        Home
      </Button>
      <Button size="medium" variant="secondary">
        Home
        <RiHome2Fill />
      </Button>
      <Button size="medium" variant="subtle">
        <RiHome2Fill />
        Home
      </Button>
    </div>
  );
}

Loading

loading.tsx

import { Button } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Loading() {
  return (
    <div>
      <div>
        <Button size="large" loading>
          Large
        </Button>
        <Button size="medium" loading>
          Medium
        </Button>
        <Button size="small" loading>
          Small
        </Button>
        <Button size="xSmall" loading>
          xSmall
        </Button>
      </div>
      <div>
        <Button size="icon_large" loading>
          <RiHome2Fill />
        </Button>
        <Button size="icon_medium" loading>
          <RiHome2Fill />
        </Button>
        <Button size="icon_small" loading>
          <RiHome2Fill />
        </Button>
        <Button size="icon_xSmall" loading>
          <RiHome2Fill />
        </Button>
      </div>
    </div>
  );
}

Disabled

disabled.tsx

import { Button } from "@uj-vilag/dap-components";

export default function Disabled() {
  return (
    <div>
      <Button variant="primary" disabled>
        Primary
      </Button>
      <Button variant="secondary" disabled>
        Secondary
      </Button>
      <Button variant="subtle" disabled>
        Subtle
      </Button>
      <Button variant="subtle_neutral" disabled>
        Subtle Neutral
      </Button>
      <Button variant="primary_inverted" disabled>
        Primary Inverted
      </Button>
      <Button variant="subtle" quiet disabled>
        Subtle quiet
      </Button>
      <Button variant="subtle_neutral" quiet disabled>
        Subtle Neutral quiet
      </Button>
    </div>
  );
}

Button

On this page