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

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>

Answer 2

I think this is if you want to create the same size between dropdown and another component like button using size attribut, you can put the dropdown inside the button :

import React from 'react'
import { Dropdown, Menu, Button } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'Choice 1', value: 1 },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

const DropdownExampleSimple = () => (
  <div>
    <Button size="tiny" >
      <Dropdown text='Dropdown' options={options} simple item />
    </Button>
    <Button size="tiny">
      This is Button
    </Button>
  </div>
)

export default DropdownExampleSimple

this is the result :

Maybe can help you, thanks

Answer 3

I had referenced this answer to find the solution. I had to give a css class of line-height: unset; (which may override a default line-height for the same class).

HTML

<Dropdown className="equal-dropdown-height" placeholder="State" options={stateOptions} search selection />

CSS

.equal-dropdown-height .text {
  line-height: unset;
}

Answer 4

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 5

A flexible way to do this is to pass in icon={null} and then set the trigger property to whatever node you want to display:

import React from 'react'
import { Dropdown, Icon } from 'semantic-ui-react'

const LargeIconDropdown = () => (
    <Dropdown
        icon={null}
        trigger={
            <Icon
                link
                name='ellipsis vertical'
                size='large'
            />
        }>
        <Dropdown.Menu>
            <Dropdown.Item
                icon='pencil'
                text='Edit'
            />
        </Dropdown.Menu>
    </Dropdown>
)

export default LargeIconDropdown

You can find an example of this in the Semantic UI React Dropdown Documentation here