Not every component you build needs to start from scratch. Existing React component libraries can help you use components that have already been built with browser compatibility, responsive screen sizes, and accessibility in mind. Internally, the Flex UI leverages Twilio Paste for many of its components. You can similarly use Paste to create components that start with a similar style to Flex UI's existing layout.
Paste is already a dependency of flex-ui but if you choose to include it explicitly, ensure the plugin doesn't have multiple versions of Paste in its dependency tree.
Paste design tokens can be referenced as is from within the props of any Paste components.
_10import { Text } from "@twilio-paste/core/text";_10_10_10Flex.MainHeader.Content.add(<Text as="p" color="colorTextBrandHighlight" key="some-text">Hello</Text>, {_10 sortOrder: -1, _10 align: "end"_10});
For more information, please refer to Twilio Paste Tokens.
Creating a custom theme following the official Paste docs may not work. To override default design tokens when using Paste, please see Theming Flex UI - Paste tokens.
In order to use Twilio Paste inside your plugin, please use Flex.setProviders() as follows which will wrap the Flex UI with the passed Paste theme provider. This will allow you to use Paste elements and design tokens within your plugin. Ensure this is done before declaring any components.
_14import { CustomizationProvider } from "@twilio-paste/core/customization";_14import { Button as PasteButton } from "@twilio-paste/core/button";_14_14Flex.setProviders({_14 PasteThemeProvider: CustomizationProvider_14});_14_14Flex.AgentDesktopView.Panel1.Content.add(_14 <div key="A">_14 <PasteButton key="A" variant="primary">_14 Paste Button_14 </PasteButton>_14 </div>_14);
To override Paste components styling using Paste's elements, you can use Flex.setProviders() to wrap a custom Paste theme provider. In this, you can pass it an elements prop to customize specific components. Refer to Providing Component elements for more details.
You can only replace the elements property in the following code examples. baseTheme, theme, and style need to be included as provided.
_22import { CustomizationProvider } from "@twilio-paste/core/customization";_22_22Flex.setProviders({_22 CustomProvider: (RootComponent) => (props) => {_22 const pasteProviderProps = {_22 baseTheme: props.theme?.isLight ? "default" : "dark",_22 theme: props.theme?.tokens,_22 style: { minWidth: "100%", height: "100%" },_22 elements: {_22 BUTTON: {_22 backgroundColor: "transparent"_22 }_22 }_22 };_22_22 return (_22 <CustomizationProvider {...pasteProviderProps}>_22 <RootComponent {...props} />_22 </CustomizationProvider>_22 );_22 }_22});