filters
filters
is an object within the theme property for overriding dashboard 'Add filter' button styles.
<Vizzly.Dashboard
// ...
theme={{
filters: {
filterBy: {
background: "#fff",
"&:hover": {
background: "#E9EBF0",
opacity: 0.7,
},
},
},
}}
/>
![Dashboard Filters for Vizzly Dashboard](/img/dashboard-filters.png)
Filters
'Add filter' buttons are shown at the top left of <Vizzly.Dashboard/>
. To override styles for the modal shown when 'Add filter' buttons are clicked, use modals.
Default Value
import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
export function Dashboard() {
const theme: VizzlyTheming.Base = {
filters: {
// Default Value
filterBy: {
background: "#fff",
border: "0",
borderRadius: "8px",
boxShadow: "unset",
color: "#374151",
fontSize: 14,
fontWeight: 500,
height: "auto",
padding: "0.45rem 1rem 0.46rem",
"&: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,
},
},
},
}
return (
<Vizzly.Dashboard
// ...
theme={theme}
/>
)
}