Configuration
In addition to the design tokens, covering aspects related to the common design system "foundations", each component exposes an interface to configure its specific features and behaviors.
Bento has been conceived as a design system builder, meaning that it allows a certain degree of flexibility in defining how your components should look like and behave (to adapt them to different scenarios), while remaining strict when it comes to using them in your application once configured.
Props vs Configuration?
Bento comes with a default configuration, but you can override it (partially or entirely) by passing a configuration object to BentoProvider
.
Let's say, for example, our designers decided all the actions (e.g. the buttons at the end of a form) should be left-aligned, with the primary action on the left.
We can configure this by setting buttonsAlignment
and primaryPosition
for the Actions
component:
import { createBentoProvider } from "@buildo/bento-design-system";
export const BentoProvider = createBentoProvider({
actions: {
buttonsAlignment: "left",
primaryPosition: "left",
},
});
export { Actions, Modal /*...*/ } from "@buildo/bento-design-system";
This way, not only the Actions
component will always respect the configuration we passed (without the need to specify the behavior every time we use it via props), but also any other component using Actions
internally (like Modal
) will follow the same configuration.
If you need multiple variants of a component, you can use the withBentoConfig
utility.
For example, suppose you want two types of Chip
, one pill-shaped and one square-shaped:
import { Chip } from "@buildo/bento-design-system";
export const { Chip: SquaredChip } = withBentoConfig(
{
chip: { radius: 0 },
},
Chip
);
export const { Chip: PillChip } = withBentoConfig(
{
chip: { radius: "circledX" },
},
Chip
);