Button

Default button

Use the variant prop to change the visual aspect of the button.

Show code

import { Button } from "@hrc/button";

export function ButtonDefault() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="text">Text</Button>
    </>
  );
}

Colors

Use the color prop to change the color of the button.

Show code

import { Fragment } from "react";
import { Button } from "@hrc/button";

const colors = [
  "primary",
  "secondary",
  "error",
  "info",
  "warning",
  "success",
] as const;

const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;

export function ButtonColors() {
  return colors.map((color) => (
    <Fragment key={`button-${color}`}>
      <Button color={color}>{toTitleCase(color)}</Button>
      <Button color={color} variant="outline">
        Outline
      </Button>
      <Button color={color} variant="text">
        Text
      </Button>
    </Fragment>
  ));
}

Disabled

Add the disabled prop to disable the button. The disabled variant has a higher priority than the color variant.

Show code

disabled.tsx
ToggleDisabled.tsx

import { useState } from "react";
import { Button } from "@hrc/button";
import { ToggleDisabled } from "./ToggleDisabled";

export function ButtonDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <Button disabled={disabled}>Default</Button>
      <Button variant="outline" disabled={disabled}>
        Outline
      </Button>
      <Button variant="text" disabled={disabled}>
        Text
      </Button>

      <Button color="warning" disabled={disabled}>
        Warning
      </Button>
      <Button color="info" variant="outline" disabled={disabled}>
        Info
      </Button>
      <Button color="success" variant="text" disabled={disabled}>
        Success
      </Button>
    </>
  );
}

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <Button
      color={disabled ? "info" : undefined}
      onClick={() => setter(!disabled)}
      className="toggle-disabled"
    >
      <Icon name={disabled ? "toggle_on" : "toggle_off"} />
      Disabled
    </Button>
  );
}

Sizes

Set the size prop to change the size of the button.

Show code

import { Button } from "@hrc/button";

export function ButtonSizes() {
  return (
    <>
      <Button color="primary" size="small">
        Small
      </Button>
      <Button color="primary">Default</Button>
      <Button color="primary" size="large">
        Large
      </Button>
    </>
  );
}

Rounded

Use the rounded prop to change the border radius of the button.

Show code

import { Button } from "@hrc/button";

export function ButtonRounded() {
  return (
    <>
      <Button color="secondary" rounded="top">
        Top rounded
      </Button>
      <Button color="secondary" rounded="bottom">
        Bottom rounded
      </Button>
      <Button color="secondary" rounded="left">
        Left rounded
      </Button>
      <Button color="secondary" rounded="right">
        Right rounded
      </Button>
      <Button color="secondary" rounded="full">
        Full rounded
      </Button>
      <Button color="secondary" rounded="none">
        No rounded
      </Button>
    </>
  );
}

With Icons

You can add icons to the button using the iconStart and iconEnd props.

Show code

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

export function ButtonWithIcons() {
  return (
    <>
      <Button color="error" iconStart={<Icon name="delete" />}>
        Delete
      </Button>
      <Button color="error" iconEnd={<Icon name="delete" />}>
        Delete
      </Button>
      <Button color="error" variant="outline" iconStart={<Icon name="close" />}>
        Close
      </Button>
      <Button color="error" variant="outline" iconEnd={<Icon name="close" />}>
        Close
      </Button>
      <Button color="error" variant="text" iconStart={<Icon name="favorite" />}>
        Favorite
      </Button>
      <Button color="error" variant="text" iconEnd={<Icon name="favorite" />}>
        Favorite
      </Button>
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Button />:

<Button />