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



Blurring New in 2.0

A dimmable element can blur its contents


Vertical Alignment New in 2.3

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



Default Description
opacity auto Dimmers opacity from 0-1. Defaults to auto which uses the CSS specified opacity.
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.
duration : { show : 500, hide : 500 }
Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition Fade Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions


Context Description
onShow dimmable Callback on element show
onHide dimmable Callback on element hide
onChange dimmable Callback on element show or hide


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 True 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