This page was generated from examples/Widget Styling.ipynb.
Interactive online version: Binder badge.

Styling of Jupyter widgets

This notebook presents how to style Jupyter interactive widgets to build rich and reactive widget-based applications.

You can jump directly to these sections:

Predefined styles

If you wish the styling of widgets to make use of colors and styles defined by the environment (to be consistent with e.g. a notebook theme), many widgets enable choosing in a list of pre-defined styles.

For example, the Button widget has a button_style attribute that may take 5 different values:

  • 'primary'

  • 'success'

  • 'info'

  • 'warning'

  • 'danger'

besides the default empty string ’’.

[1]:
from ipywidgets import Button

Button(description='Danger Button', button_style='danger')
[1]:

The style attribute

While the layout attribute only exposes layout-related CSS properties for the top-level DOM element of widgets, the
style attribute is used to expose non-layout related styling attributes of widgets.

However, the properties of the style attribute are specific to each widget type.

[2]:
b1 = Button(description='Custom color')
b1.style.button_color = 'lightgreen'
b1
[2]:

You can get a list of the style attributes for a widget with the keys property.

[3]:
b1.style.keys
[3]:
['_model_module',
 '_model_module_version',
 '_model_name',
 '_view_count',
 '_view_module',
 '_view_module_version',
 '_view_name',
 'button_color',
 'font_family',
 'font_size',
 'font_style',
 'font_variant',
 'font_weight',
 'text_color',
 'text_decoration']

Just like the layout attribute, widget styles can be assigned to other widgets.

[4]:
b2 = Button()
b2.style = b1.style
b2
[4]:

Widget styling attributes are specific to each widget type.

[5]:
from ipywidgets import IntSlider

s1 = IntSlider(description='Blue handle')
s1.style.handle_color = 'lightblue'
s1
[5]:

Styles can be given when a widget is constructed, either as a specific Style instance or as a dictionary.

[6]:
b3 = Button(description='Styled button', style=dict(
    font_style='italic',
    font_weight='bold',
    font_variant="small-caps",
    text_color='red',
    text_decoration='underline'
))
b3
[6]:

Current supported attributes

Currently, the styling attributes that are supported vary from widget to widget. Here is the list of which different Style widgets are used by the various other widgets:

[7]:
from collections import defaultdict
from IPython.display import HTML
import ipywidgets
from pprint import pprint
[8]:
reverse_lut = defaultdict(set)
styles = set()
for export_name in dir(ipywidgets.widgets):
    export = getattr(ipywidgets.widgets, export_name)
    try:
        if issubclass(export, ipywidgets.Widget) and 'style' in export.class_trait_names():
            reverse_lut[export.style.klass.__name__].add(export.__name__)
            styles.add(export.style.klass)
    except TypeError:
        pass

html = '<ul>'
for style, widgets in reverse_lut.items():
    html = f"{html}\n<li><b>{style}:</b> {', '.join(sorted(widgets))}</li>"
html += "</ul>"
HTML(html)
[8]:
  • DescriptionStyle: BoundedFloatText, BoundedIntText, ColorPicker, ColorsInput, DatePicker, DatetimePicker, Dropdown, FloatText, FloatsInput, IntText, IntsInput, NaiveDatetimePicker, Play, RadioButtons, Select, SelectMultiple, TagsInput, TimePicker, Valid
  • ButtonStyle: Button, FileUpload
  • CheckboxStyle: Checkbox
  • TextStyle: Combobox, Password, Text, Textarea
  • SliderStyle: FloatLogSlider, FloatRangeSlider, FloatSlider, IntRangeSlider, IntSlider, SelectionRangeSlider, SelectionSlider
  • ProgressStyle: FloatProgress, IntProgress
  • HTMLStyle: HTML
  • HTMLMathStyle: HTMLMath
  • LabelStyle: Label
  • ToggleButtonStyle: ToggleButton
  • ToggleButtonsStyle: ToggleButtons

And here are the different attributes that the different Style widgets support:

[9]:
attributes = defaultdict(set)
base_traits = set(ipywidgets.Style.class_trait_names())

for s in styles:
    for t in s.class_trait_names():
        if not t.startswith("_") and t not in base_traits:
            attributes[s.__name__].add(t)
all_attributes = set().union(*attributes.values())

html = '<table>\n'
html = f"{html}<tr><th>Attribute</th>{ ''.join(f'<th>{s}</th>' for s in attributes.keys()) }</tr>"
for a in all_attributes:
    html = f"""{html}<tr><td>{a}</td>{ ''.join(f'<td>{"✓" if a in attribs else ""}</td>' for attribs in attributes.values()) }</tr>"""
html += "</table>"
HTML(html)
[9]:
AttributeCheckboxStyleLabelStyleProgressStyleHTMLStyleSliderStyleToggleButtonsStyleDescriptionStyleButtonStyleToggleButtonStyleHTMLMathStyleTextStyle
bar_color
text_color
button_width
font_variant
handle_color
font_style
font_weight
button_color
text_decoration
font_size
description_width
font_family
background