Documentation
ChevronDown

--aura-button-radius

Default border radius for buttons.

CSS
Copy Copy
*:root {
    --aura-button-radius: 13px;
}

--aura-button-radius is a CSS custom property that specifies the border radius of buttons in a design system. The value of --aura-button-radius can be applied to elements with the classes .button-fill, .button-pill, and .button-link to set their border radius.

In the CSS file, the custom property can be used as follows:

CSS
Copy Copy
.button-fill, 
.button-pill, 
.button-link {
    border-radius: var(--aura-button-radius);
}

By using the --aura-button-radius custom property, the border radius of buttons can be easily changed and updated in one place, which helps maintain consistency and makes updates more manageable. Additionally, because the border radius is specified using a custom property, any changes made to --aura-button-radius will be reflected in the border radius of the buttons with the classes .button-fill, .button-pill, and .button-link.