buttons

buttons is an object within the theme property for overriding modal buttons styles, and, add button style.

To override styles for the 'Add filter' button at the top of dashboards, use filters.

Primary Buttons

primary buttons are featured within <Vizzly.Dashboard/> in the following loctions:

In modals, primary buttons are used to confirm actions.
In the View Editor, primary buttons are used to save changes.

<Vizzly.Dashboard
  // ...
  theme={{
    buttons: {
      primary: {
        background: "#374151",
        "&:hover": {
          background: "#4b5462",
          opacity: 1,
        },
        "&:disabled": {
          background: "#9ba0a8",
          opacity: 1,
        },
        "&:hover:disabled": {
          background: "#9ba0a8",
          opacity: 1,
        },
      },
    },
  }}
/>

Secondary Buttons

secondary buttons are featured within <Vizzly.Dashboard/> in the following loctions:

In modals, secondary buttons are used to cancel actions.
In the View Editor, secondary buttons are used to cancel changes.

<Vizzly.Dashboard
  // ...
  theme={{
    buttons: {
      secondary: {
        background: "#fff",
        "&:hover": {
          background: "#E9EBF0",
          opacity: 1,
        },
        "&:disabled": {
          background: "#fff",
          opacity: 0.7,
        },
        "&:hover:disabled": {
          background: "#fff",
          opacity: 0.7,
        },
      },
    },
  }}
/>

'Add' Buttons

add buttons are featured within <Vizzly.Dashboard/> in the following loctions:

In the View Editor, small 'Add' buttons add new content.
In the empty dashboard Views, small 'Add' buttons select templates and add empty Views.
To the left of the Dashboard rows, medium 'Add' buttons add cells to rows and header rows.
At the bottom of the Dashboard, large 'Add' buttons add rows.

<Vizzly.Dashboard
  // ...
  theme={{
    buttons: {
      add: {
        border: "2px dashed #c3c6ca",
        color: "#555d6b",
        "&:hover": {
          border: "2px dashed #3074d9",
          color: "#3074d9",
        },
        small: {
          fontSize: "12px",
        },
        medium: {
          fontSize: "12px",
        },
        large: {
          fontSize: "14px",
        },
      },
    },
  }}
/>

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    buttons: {
      // Default Values
      primary: {
        background: "#374151",
        border: "0",
        borderRadius: "8px",
        boxShadow: "unset",
        color: "#fff",
        fontSize: 14,
        fontWeight: 500,
        height: "auto",
        narrowPadding: ".6rem 1rem",
        padding: ".6rem 1rem",
        "&:hover": {
          background: "#4b5462",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#fff",
          fontWeight: 500,
          opacity: 1,
        },
        "&:disabled": {
          background: "#9ba0a8",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#fff",
          fontWeight: 500,
          opacity: 1,
        },
        "&:hover:disabled": {
          background: "#9ba0a8",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#fff",
          fontWeight: 500,
          opacity: 1,
        },
      },
      secondary: {
        background: "#fff",
        border: "0",
        borderRadius: "8px",
        boxShadow: "unset",
        color: "#374151",
        fontSize: 14,
        fontWeight: 500,
        height: "auto",
        narrowPadding: ".6rem 1rem",
        padding: ".6rem 1rem",
        "&:hover": {
          background: "#E9EBF0",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#374151",
          fontWeight: 500,
          opacity: 0.7,
        },
        "&:disabled": {
          background: "#fff",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#374151",
          fontWeight: 500,
          opacity: 0.7,
        },
        "&:hover:disabled": {
          background: "#fff",
          border: "0",
          borderRadius: "8px",
          boxShadow: "unset",
          color: "#374151",
          fontWeight: 500,
          opacity: 0.7,
        },
      },
      add: {
        background: "transparent",
        border: "2px dashed #c3c6ca",
        boxShadow: "unset",
        borderRadius: "8px",
        color: "#555d6b",
        "&:hover": {
          background: "transparent",
          border: "2px dashed #3074d9",
          boxShadow: "unset",
          color: "#3074d9",
        },
        small: {
          fontWeight: 500,
          padding: "0 12px",
          fontSize: "12px",
        },
        medium: {
          fontWeight: 500,
          padding: "0 12px",
          fontSize: "12px",
        },
        large: {
          fontWeight: 500,
          padding: "0 12px",
          fontSize: "14px",
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}