Customizability of components

[robyn-bautista]

Hi there, I was curious about options for component customization, particularly when it comes to color. After talking with our eng team, it seems the components coming straight from Paste are not customizable in that regard. Are there any other recommendations around this (example would theming work for our use case)? Otherwise it sounded like we'd need to build a custom component?

Here is the problem we are trying to solve laid out in figma

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there!

For component customization, especially regarding color, Paste provides a structured way to apply custom themes to your application, which might be suitable for your use case. This is done through the Customization Provider, which allows you to change the theme of your entire application or target specific components, including altering their color schemes to match your requirements. This is particularly useful if you are working on a Flex plugin or any application where you need to align the visual appearance with your brand or specific design requirements.

Here's a snippet on how you might use the Customization Provider for theming:

import {CustomizationProvider} from '@twilio-paste/customization';

const customTheme = {
  // Your custom theme tokens go here
};

<CustomizationProvider theme={customTheme}>
  {/* Your application components go here */}
</CustomizationProvider>

For more detailed guidance on how to use our customization tools, including Remix, our theme designer for customization, you can refer to the Customization documentation.

However, if your customization needs extend beyond what theming allows (for example, if you need a completely different component structure or functionality that isn't supported by Paste components out of the box), then you might indeed need to build a custom component. When building custom components, you can leverage Paste's Design Primitives like Box and Text to ensure your custom component aligns with the design system's guidelines and tokens.

Remember, while Paste encourages using components as they are to ensure consistency and accessibility across Twilio products, it also provides mechanisms like the Customization Provider and Design Primitives to accommodate specific design needs within the system's constraints.

If you have any more specific questions or need further assistance, feel free to ask!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Colored Checkboxes - Answer (updated: 10/24/2023, similarity score: 87%)
• Input Customization Options (updated: 11/15/2024, similarity score: 87%)
• best practice of using custom styles / classNames on paste components - Answer (updated: 08/08/2022, similarity score: 87%)

[serifluous]

Hey Robyn! For customization, are you asking whether a Flex customer can customize a component, or the Flex product team?

From the Figma, it seems like you're looking to customize both the:

1. Color of chat bubbles, which can be done by a Flex customer with the Paste Customization Provider following the documentation here: https://paste.twilio.design/customization/customizing-component-elements . If your product team needs to customize the chat bubble in the default implementation of Flex, please share more!
2. Icon in a Button, which is doable through the component by both a Flex customer and the Flex product team. You're free to add any children in a Button.

Let us know if you have anymore questions!

[robyn-bautista]

Thanks Sarah! I'll follow up with my team, but I do believe it would be on on default implementation to make sure it matches the look and feel of the comms canvas chat bubble (which we're currently limited on updating so for consistency's sake will need to match ours to it). And then from there, customers would customize it further (with color etc)

[serifluous]

Ahhh I see—it's to match the original Flex chat implementation, right?

In that case, yeah, your team would need to build a separate chat bubble using the Box and Text primitives.

[robyn-bautista]

we thought we might have to :'( thanks for clarifying!