Prism Docs

import { Button } from '@mylighthouse/prism-react';

export default function ButtonTypesDefault(): React.JSX.Element {
  return (
    <>
      <Button>Primary</Button>
      <Button buttonType="brand">Brand</Button>
      <Button buttonType="secondary">Secondary</Button>
      <Button buttonType="ghost">Ghost</Button>
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonTypesStatus(): React.JSX.Element {
  return (
    <>
      <Button buttonType="success">Success</Button>
      <Button buttonType="warning">Warning</Button>
      <Button buttonType="critical">Critical</Button>
      <Button buttonType="critical-secondary">Critical-secondary</Button>
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonTypesIntelligence(): React.JSX.Element {
  return (
    <>
      <Button buttonType="intelligence">Intelligence</Button>
      <Button buttonType="intelligence-secondary">
        Intelligence-secondary
      </Button>
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonSize(): React.JSX.Element {
  return (
    <>
      <Button size="small">Small</Button>
      <Button>Medium</Button>
      <Button size="large">Large</Button>
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonIcon(): React.JSX.Element {
  return (
    <>
      <Button buttonType="secondary" iconBefore="plus">
        Icon before
      </Button>
      <Button buttonType="secondary" iconAfter="plus">
        Icon after
      </Button>
      <Button aria-label="Add" buttonType="secondary" icon="plus" />
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonLoading(): React.JSX.Element {
  return (
    <>
      <Button buttonType="secondary" isLoading={true} size="small">
        Loading
      </Button>
      <Button buttonType="secondary" isLoading={true}>
        Loading
      </Button>
      <Button buttonType="secondary" isLoading={true} size="large">
        Loading
      </Button>
    </>
  );
}

import { Button } from '@mylighthouse/prism-react';

export default function ButtonDisabled(): React.JSX.Element {
  return (
    <>
      <Button buttonType="secondary" iconBefore="plus" isDisabled size="small">
        Small
      </Button>
      <Button buttonType="secondary" iconBefore="plus" isDisabled>
        Medium
      </Button>
      <Button buttonType="secondary" iconBefore="plus" isDisabled size="large">
        Large
      </Button>
    </>
  );
}