Buttons

Buttons let users initiate actions, like saving changes, navigating or canceling.

Button Types

export interface Buttons {
  primary?: ButtonType;
  secondary?: ButtonType;
  area?: AddButton;
}

Primary Button

Properties

export interface ButtonType extends ButtonState {
  padding?: CSSProperties["padding"];
  fontWeight?: CSSProperties["fontWeight"];
  boxShadow?: CSSProperties["boxShadow"];
  borderRadius?: CSSProperties["borderRadius"];
  fontSize?: CSSProperties["fontSize"];
  height?: CSSProperties["height"];
  "&:hover"?: ButtonState;
}
 
export type ButtonSize = {
  fontWeight?: CSSProperties["fontWeight"];
  padding?: CSSProperties["padding"];
  fontSize?: CSSProperties["fontSize"];
  height?: CSSProperties["height"];
};
 
export type ButtonState = {
  background?: CSSProperties["background"];
  color?: CSSProperties["color"];
  border?: CSSProperties["border"];
  borderRadius?: CSSProperties["borderRadius"];
};

Secondary Button

Properties

export interface ButtonType extends ButtonState {
  padding?: CSSProperties["padding"];
  fontWeight?: CSSProperties["fontWeight"];
  boxShadow?: CSSProperties["boxShadow"];
  borderRadius?: CSSProperties["borderRadius"];
  fontSize?: CSSProperties["fontSize"];
  height?: CSSProperties["height"];
  "&:hover"?: ButtonState;
}
 
export type ButtonSize = {
  fontWeight?: CSSProperties["fontWeight"];
  padding?: CSSProperties["padding"];
  fontSize?: CSSProperties["fontSize"];
  height?: CSSProperties["height"];
};
 
export type ButtonState = {
  background?: CSSProperties["background"];
  color?: CSSProperties["color"];
  border?: CSSProperties["border"];
  borderRadius?: CSSProperties["borderRadius"];
};

Add Content Button

The button style can be found in three guises.

In the Editor, the "add" button can found below the Lists
To the left of the Dashboard row, this allows your user to add an empty View.
To the bottom of the Dashboard, this allows your user to add an empty Row.

export type AddButton = {
  background?: CSSProperties["background"];
  border?: CSSProperties["border"];
  boxShadow?: CSSProperties["boxShadow"];
  borderRadius?: CSSProperties["borderRadius"];
  color?: CSSProperties["color"];
  "&:hover"?: {
    background?: CSSProperties["background"];
    border?: CSSProperties["border"];
    boxShadow?: CSSProperties["boxShadow"];
    color?: CSSProperties["color"];
  };
  small?: AddButtonTypes;
  medium?: AddButtonTypes;
  large?: AddButtonTypes;
};
 
export type AddButtonTypes = {
  fontWeight?: CSSProperties["fontWeight"];
  fontSize?: CSSProperties["fontSize"];
};