@trycourier/react-elements NPM

React Elements

React Elements

Courier React Elements is a package of bite sized components that are shared between our larger components like Inbox and Toast.

This package includes highly reusable components such as buttons, icons, and modals.

Caution: This package is not yet stable. Interfaces are subject to change.

A simple button. Uses <button> as its root element.

import { Button } from 'react-elements';

interface ButtonProps {
  size?: "xs" | "sm" | "md" | "lg";
  /** Color of the button */
  color?: string;
  /** Defaults to white */
  textColor?: string;
  /** CSS Overrides to apply to the button*/
  css?: CSSObject;
}


<Button onClick={doWork} css={{ borderRadius: 5 }}>
  Click Me!
<Button/>

A set of icons.

Available icons:

Courier
CourierTextLogo

import { icons } from "react-elements";

export interface IconProps {
  /** Defaults to 100% of parent. */
  size?: "xs" | "sm" | "md" | "lg" | number;
  color?: string;
  /** CSS Overrides of the SVG container */
  css?: CSSObject;
  /** CSS Overrides of the SVG tag */
  svgCSS?: CSSObject;
}

<icons.Courier fill={"tomato"} />;

A simple button. Uses <a> as its root element.

import { LinkButton } from 'react-elements';

interface ButtonProps {
  size?: "xs" | "sm" | "md" | "lg";
  // Color of the button
  color?: string;
  /** Defaults to white */
  textColor?: string;
  /** CSS Overrides to apply to the button*/
  css?: CSSObject;
}

<LinkButton onClick={doWork} css={{ borderRadius: 5 }}>
  Click Me!
<LinkButton/>

A simple title. Uses <h1> as its root element.

import { Title } from "react-elements";

interface TitleProps {
  children: React.ReactNode;
  /** CSS Overrides to apply to the title*/
  css?: CSSObject;
}

<Title>Hello World</Title>;

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

10 months ago

11 months ago

10 months ago

10 months ago

7 months ago

9 months ago

11 months ago

10 months ago

7 months ago

11 months ago

10 months ago

6 months ago

10 months ago

10 months ago

10 months ago

8 months ago

6 months ago

8 months ago

10 months ago

9 months ago

10 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

9 months ago

8 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

6 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

React Elements

Button

Icons

Link Button

Title