Components roundness

In Ignite UI for Angular we allows you to change the shape of components by changing their border-radius

Overview

Border radius as any other property is set through the theme schema like it's shown in the example bellow.

$_light-button: (
    flat-border-radius: .2,
    raised-border-radius: .2,
    fab-border-radius: 1,
    icon-border-radius: 1,
);

As you can see from the example above, the component schema for Button theme defines the default border-radius for all types of buttons.

Let's look at how things work. The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum.

We decided to not limit you to fractions only. You can use whatever unit you want - pixels, relative units like em or rem, etc., allowing you to overwrite the implicit border radius limits.

If you decide to go with fractions, you will automatically be limited by the theming engine to min and max boundary for each component.

How to use?

Let's see how we can change the default values for the buttons from the example above.

// In the context of the button the min and max values are 0 - 20px, 
// For all baseline values see the table at the bottom of the page

$myButtons-theme: (
    $flat-border-radius: .5, // will resolve to 10px
    $raised-border-radius: 30px, // Will resolve to 30px
    $fab-border-radius: 10%, // Will resolve to 10%
    $icon-border-radius: .5 .2 .5 .2, // Will resolve to 10px 4px 10px 4px
);

@include igx-button($myButtons-theme);

The result from the above code snippets is:

Baseline roundness values

The table shows the default border-radius for each component and its min and max boundaries

Corners can be shaped? Min/Max boundaries Baseline theme values
Button(Flat) Yes; Yes; Yes; Yes; 0 - 20px 4px
Button(Raised) Yes; Yes; Yes; Yes; 0 - 20px 4px
button(Fab) Yes; Yes; Yes; Yes; 12px - 28px 28px
button(Icon) Yes; Yes; Yes; Yes; 0 - 18px 18px
Button-group Yes; Yes; Yes; Yes; 0 - 20px 4px
Chip Yes; Yes; Yes; Yes; 0 - 20px 4px
Card Yes; Yes; Yes; Yes; 0 - 24px 4px
Carousel Yes; Yes; Yes; Yes; 0 - 36px 0
Dialog Yes; Yes; Yes; Yes; 0 - 36px 4px
Drop-down Yes; Yes; Yes; Yes; 0 - 20px 4px
Expansion panel Yes; Yes; Yes; Yes; 0 - 16px 0
input(Border) Yes; Yes; Yes; Yes; 0 - 20px 4px
input(Box) Yes; Yes; No; No; 0 - 20px 4px 4px 0 0
input(Search) Yes; Yes; Yes; Yes; 0 - 20px 4px
List Yes; Yes; Yes; Yes; 0 - 24px 0
List item Yes; Yes; Yes; Yes; 0 - 24px 0
Navdrawer Yes; Yes; Yes; Yes; 0 - 36px 0
Snackbar Yes; Yes; Yes; Yes; 0 - 24px 4px
Tooltip Yes; Yes; Yes; Yes; 0 - 16px 4px
Toast Yes; Yes; Yes; Yes; 0 - 26px 26px

Our community is active and always welcoming to new ideas.