Button Corner Styles: Webflow vs. React Library Differences
Why do buttons have rounded corners in Webflow but square corners in the React Library?
Why do buttons have rounded corners in Webflow but square corners in the React Library?
Hi Matt J. I don’t think that’s it. To put it another way. Why on page https://www.relume.io/ui-elements?ui-elements-categories=buttons do the UI buttons have square corners but the ‘Start for free’ button has rounded corners? (See screenshot above.) Do you not use your own design system?
Or did the corners of button change from square in Webflow Relume styleguide: Client-First V2.1 • Last updated Jan 09, 2024 Which is what I think a two year old project I’m working on uses.
To square corners in Relume Webflow starter project: Version 3 • Client-First V2.1 • Last updated Mar 4, 2025
Because when I try to add new React Library buttons (square corners) https://react-docs.relume.io/elements/button To a site using Devlink components from a Webflow site from a couple of years ago (buttons with round corners), the buttons don’t match?
Louie C. well I guess the simple answer is that the square button is the most vanilla version of a button you can have - and the component library's mission is to be an unstyled, vanilla component library. The "Start for free" button is our marketing website button that has rounded corners and is styled to match our marketing website style guide. So two completely different things really. As for the starter projects - not entirely sure. All starter projects will start with no styles applied (or as little styles as possible) applied to elements and components to create a true starter. If your Devlink components are not matching a webflow site from a couple of years ago its likely something around class syncing or the webflow site's classes are different than the devlink component classes - its really hard to say honestly because I'm really flying blind here. Are you building a Webflow site or a React site? It sounds like both to be honest. Can you share a read-only link or a visual of what it is you are referencing (design) on one side and what you are getting as a result on the other? Keen to unblock you here the best I can!
Hi Matt, Thanks for your time and attention on this. I think I now know what is going on and you can consider this is resolved. Based on what you said I’m going to assume
Relume has always had square corners
I think my confusion was caused by a coincidence:
A legacy Webflow project that I’ve started working on used a Relume 2024 template initially, then I think they applied rounded corners, but they never renamed the title on the style guide - it was still called ‘Relume’
By coincidence, the Relume marketing site buttons have very similar rounded corners
So I was working on false assumptions:
that Relume has had rounded corners at some point
that the project was using vanilla Relume styles
Are you building a Webflow site or a React site? It sounds like both to be honest.
It is both, and they need to match in style:
a marketing site in Webflow
an interactive site in React
most likely because we dont yet have style guide builder export for React and border radius is a setting within the style guide tab.
I now understand
vanilla Relume React library buttons won’t match our styled Webflow or Webflow Devlink buttons
you don’t provide an easy way to export button styles from a Webflow style guide based on Relume (but modified) to be used on React library buttons
So I need to have a think again about my approach. Thanks for your time, you can consider this resolved. Bye.