@trycourier/react-elements

• React Elements
  • Button
  • Icons
  • Link Button
  • Title

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.

Button

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

Usage:

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/>

Icons

A set of icons.

Available icons:

• Courier
• CourierTextLogo

Usage:

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"} />;

Link Button

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

Usage:

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/>

Title

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

Usage:

import { Title } from "react-elements";

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

<Title>Hello World</Title>;