How can I make the text of a button not be uppercase

Is there a way to make the text of a button appear how I enter it, and not in all uppercase?

4 Replies

kapa.ai•14mo ago

Hi @theshow72. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, there is no specific mention of a feature in Refine that automatically converts button text to uppercase. Therefore, the text you provide for a button should appear as you enter it. For example, in the Material UI button example, the text within the <Button> tags appears as it is entered:

<Button>Primary</Button>  
<Button disabled>Disabled Text</Button>  
<Button href="#text-buttons">Link Button</Button>

<Button>Primary</Button>  
<Button disabled>Disabled Text</Button>  
<Button href="#text-buttons">Link Button</Button>

Similarly, in the Refine examples, the text for buttons like <ExportButton>, <SaveButton>, <ListButton>, <DeleteButton>, and <ImportButton> should appear as entered. If you're experiencing a different behavior, it might be due to CSS styles applied either globally or specifically to the button components. If you want to customize the appearance of your buttons, you can use the refine CLI (https://refine.dev/docs/packages/documentation/cli/) to swizzle components and modify them according to your needs. Please refer to the Refine documentation (https://refine.dev/docs) and the Refine blog (https://refine.dev/blog) for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@1107774951605415976> kapa.ai is still learning and improving, please let us how it did by reacting below

optimistic-gold•14mo ago

All of the examples on https://mui.com/material-ui/react-button/#basic-button show in uppercase, even though the text is in mixed case in the code. It looks like there is a CSS that has the text-transform = uppercase.

React Button component - Material UI

Buttons allow users to take actions, and make choices, with a single tap.

optimistic-gold•14mo ago

.MuiButton-root { text-transform: none; }