Search code examples
semantic-uisemantic-ui-react

How to set Semantic UI Dropdown size to match buttons, etc

Semantic UI has a great way to apply common sizing to a lot of things, e.g. a button (in Semantic UI React):

<Button size="tiny"  />

However the Dropdown, which in many cases looks just like a button and is placed on a row with buttons, does not appear to take the "size" parameter.

https://react.semantic-ui.com/modules/dropdown

Is there a good way to apply the same size to the dropdown as to other elements e.g. Buttons in a row? (i.e. not just fiddling with custom CSS, but something more maintainable).

Solution

  • I think the right way should be wrap it inside a form, and apply the size classes to the form. The form could be a form tag, but also could be div:

    <form className='ui form small'>
 <Dropdown>

    or

    <div className='ui form mini'>
 <Dropdown>