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

Question

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).

Answer 1

Assuming your Dropdown has the button option set, you can pass the size you want in the className prop. For example:

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'> 

Answer 2

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>