A dimmer hides distractions to focus attention on particular content



A simple dimmer displays no content

// left button $('.segment').dimmer('show'); // right button $('.segment').dimmer('hide');
A dimmer will automatically be created when a dimming behavior is triggered on an element.

Overlayable Section

Overlayable Section

Content Dimmer

A dimmer can display content

dimmers with content now only need a single wrapping content container.

Overlayable Section

Dimmed Message!

Page Dimmer

A dimmer can be formatted to be fixed to the page




An active dimmer will dim its parent container


A disabled dimmer cannot be activated




A dimmable element can blur its contents


Vertical Alignment

A dimmer can have its content top or bottom aligned.






Simple Dimmer

A dimmer can be controlled without Javascript

Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.

Inverted Dimmer

A dimmer can be formatted to have its colors inverted

Dimmer Shades

A dimmer can be formatted to have a different depth of background shading using the additional classes medium, light or very light

Also works in combination with inverted

Partially Dimmer

A dimmer can be displayed only partially and limited to the overall height of its content instead of the whole to be covered area. This can be used for example as a caption on any element by using top dimmer, center dimmer or bottom dimmer


ui top dimmer


ui center dimmer


ui bottom dimmer
Works also very well with transitions fade up or fade down
$('.partially.example .dimmer') .dimmer({ transition: 'fade up', on: 'hover' }) ;


ui bottom dimmer


ui center dimmer


Dimmer Events

A dimmer can trigger a visibility change on an event

$('.event.example .image') .dimmer({ on: 'hover' }) ;



Loaders inside Dimmers

Any loader inside a dimmer will automatically use an appropriate color to match


You can customize a loader in a dimmer via javascript

$('.dimmerloader.example .image') .dimmer({ displayLoader: true, loaderVariation: 'slow orange medium elastic', loaderText: 'Wait a second, please...' }) .dimmer('show') ;



You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.

// these two are the same $('.ui.dimmable') .dimmer('show') ; $('.ui.dimmable .dimmer') .dimmer('show') ;

Creating Dimmers

If a dimmer does not exist inside the element it will be created on first use.

$('h4') .dimmer('toggle') ;

Showing a Specific Dimmer

If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.

// If a dimmer exists on a page, you can make it appear by calling it directly $('.page.dimmer:first') .dimmer('toggle') ;


All the following behaviors can be called using the syntax:

Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the dimmable context, or the ui dimmer
$('.your.element') .dimmer('behavior name', argumentOne, argumentTwo) ;
Behavior Description
add content (element) Detaches a given element from DOM and reattaches element inside dimmer
show Shows dimmer
hide Hides dimmer
toggle Toggles current dimmer visibility
set opacity(opacity) Changes dimmer opacity
create Creates a new dimmer in dimmable context
get duration Returns current duration for show or hide event depending on current visibility
get dimmer Returns DOM element for dimmer
has dimmer Returns whether current dimmable has a dimmer
is active Whether section's dimmer is active
is animating Whether dimmer is animating
is dimmer Whether current element is a dimmer
is dimmable Whether current element is a dimmable section
is disabled Whether dimmer is disabled
is enabled Whether dimmer is not disabled
is page Whether dimmable section is body
is page dimmer Whether dimmer is a page dimmer
set active Sets page dimmer to active
set dimmable Sets an element as a dimmable section
set dimmed Sets a dimmable section as dimmed
set page dimmer Sets current dimmer as a page dimmer
set disabled Sets a dimmer as disabled
destroy Destroys instance and removes all events



Default Description
useFlex true Whether dimmers should use flex or legacy positioning
variation false Specify a variation to add when generating dimmer, like inverted
dimmerName false If initializing a dimmer on a dimmable context, you can use dimmerName to distinguish between multiple dimmers in that context.
closable auto Whether clicking on the dimmer should hide the dimmer (Defaults to auto, closable only when settings.on is not hover
on false Can be set to hover or click to show/hide dimmer on dimmable event
useCSS true Whether to dim dimmers using CSS transitions.
transition fade Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions

Alternatively you can provide an object to set individual values for hide/show transitions as well as hide/show duration

{ showMethod : 'fade', showDuration : 200, hideMethod : 'zoom', hideDuration : 500, }

duration : { show : 500, hide : 500 }
Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations. Will be ignored completely when individual hide/show duration values are provided via the transition setting
displayLoader false Whether a custom loader should be generated inside the dimmer
loaderVariation '' Additional css classes to style the loader. See Loader
loaderText false If a string is given, it will be shown underneath the loader animation icon


Context Description
onShow dimmable Callback before dimmer is shown. Returning false from this callback will cancel the dimmer from showing.
onHide dimmable Callback before dimmer is hidden. Returning false from this callback will cancel the dimmer from hiding.
onChange dimmable Callback on element show or hide
onVisible dimmable Callback on element when dimmer is fully shown
onHidden dimmable Callback on element when dimmer is fully hidden


These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
namespace dimmer Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector: { dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }
Object containing selectors used by module.
template : { dimmer: function() { return $('
').attr('class', 'ui dimmer'); } }
Templates used to generate dimmer content
className : { active : 'active', dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', hide : 'hide', show : 'show', transition : 'transition' }
Class names used to attach style to state
name Dimmer Name used in debug logs
silent false Silences all console output including error messages, regardless of other debug settings.
debug false Provides standard debug output to console
performance true Provides standard debug output to console
verbose false Provides ancillary debug output to console
error : { method : 'The method you called is not defined.' }
Error messages displayed to console

Dimmer Message
Dimmer sub-header