Appearance
The DropDownButton provides a predefined set of appearance options.
Apart from the default vision of the DropDownButton, these alternative styling options enable you to configure each individual aspect of the component's appearance.
The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:
- DropDownButton Configurator demo
- DropDownButton Sizes
- DropDownButton Shape
- DropDownButton Roundness
- DropDownButton Fill Mode
- DropDownButton Theme Colors
Configurator demo
The following example demonstrates configuring different aspects of a DropDownButton appearance through a configurator.
Size
The size of the DropDownButton is controlled through its size property. The values we can pass to the property are as follows:
small— Sets thepaddingto2pxand8px.medium(Default) — Sets thepaddingto4pxand8px.large— Sets thepaddingto6pxand8px.null— Passingnullto thesizeproperty gives us the option to define acustom CSS classthat sets thepaddingof the DropDownButton.
The following example demonstrates the usage of each size option:
Shape
The shape of the DropDownButton is controlled through its shape property. The values we can pass to the property are as follows:
rectangle(Default) — Sets a shape based on therectangleoption.square— Sets a shape based on thesquareoption.null— Passingnullto theshaperemoves the built-in shape of the DropDownButton.
The following example demonstrates the usage of each shape option:
Roundness
The roundness of the DropDownButton is controlled through its rounded property. The values we can pass to the property are as follows:
small— Sets theborder radiusto1px.medium(Default) — Sets theborder radiusto2px.
large— Sets theborder radiusto4px.
full— Sets theborder radiusto9999px.null— Passingnullto theroundedproperty gives us the option to define acustom CSS classthat defines theborder-radiusof the DropDownButton.
The following example demonstrates the usage of each rounded option:
Fill Mode
The styling of the DropDownButton is controlled through its fillMode property. The values we can pass to the property are as follows:
solid(Default) — Sets abackgroundcolor andsolid borders.flat— Setstransparent background and bordersin default state, andbackground colorin focused state.outline— Sets atransparent backgroundandsolid borders.link— Setstransparent background and borders.null— Passingnullto thefillModeproperty gives us the option to define acustom CSS classthat defines thebackgroundandborderof the DropDownButton.
The following example demonstrates the usage of each fillMode option:
Theme Colors
The color of the DropDownButton is controlled through its themeColor property.
base(Default) — The color of the DropDownButton will be based on thebasetheme color.primary— The color of the DropDownButton will be based on theprimarytheme color.secondary— The color of the DropDownButton will be based on thesecondarytheme color.tertiary— The color of the DropDownButton will be based on thetertiarytheme color.info— The color of the DropDownButton will be based on theinfotheme color.success— The color of the DropDownButton will be based on thesuccesstheme color.warning— The color of the DropDownButton will be based on thewarningtheme color.error— The color of the DropDownButton will be based on theerrortheme color.dark— The color of the DropDownButton will be based on thedarktheme color.light— The color of the DropDownButton will be based on thelighttheme color.inverse— The color of the DropDownButton will be based on theinversetheme color.null— Passingnullto thethemeColorproperty gives us the option to define acustom CSS classthat sets the look of the DropDownButton.
The following example demonstrates the usage of each themeColor option: