Skip to content
Branch: master
Find file History
tomdye Export classes rather than bases (#685)
* remove extension points

* fix width usage
Latest commit 299ff7e Mar 14, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
example Updates for Dojo v4.0.0 (#592) Sep 21, 2018
tests Upgrade to dojo 5.0.0 (#637) Jan 8, 2019
README.md
index.ts Export classes rather than bases (#685) Mar 14, 2019

README.md

@dojo/widgets/button widget

Dojo's Button widget creates a <button> element

Features

  • Provides an API for valid <button> attributes
  • Can be used to create a toggle button (i.e. a button with an on/off state)
  • Provides an easy API to create a button controlling a popup

Accessibility Features

  • The basic button provides a strongly typed type property, as well as describedBy and disabled
  • Setting pressed to create a toggle button handles aria-pressed
  • Creating a popup button with popup sets aria-haspopup, aria-controls, and aria-expanded

Example Usage

// Basic usage
w(Button, {
	type: 'submit',
	value: 'foo'
}, [ 'Submit' ]);

// Toggle button
// pressed must be a boolean to correctly set aria-pressed
w(Button, {
	describedBy: 'instructions',
	pressed: !!this.state.buttonPressed,
	onClick: (event: MouseEvent) => {
		this.setState({ buttonPressed: !this.state.buttonPressed });
	}
}, [ 'Click Me' ]),
v('p', {
	id: 'instructions'
}, [ 'You can use this pattern to provide extra information, if necessary' ]);

// Button that controls a popup (e.g. a modal or tooltip)
w(Button, {
	id: 'foo',
	popup: {
		id: 'bar',
		expanded: this.state.popupOpen
	},
	onClick: () => {
		this.setState({ popupOpen: !this.state.popupOpen });
	}
}, [ 'Open Popup' ]),
v('div', {
	id: 'bar',
	...
}, [ 'Popup Content' ])

Theming

The following CSS classes are available on the root node of the Button widget for use with custom themes:

  • root: Always available
  • disabled: Applied if properties.disabled is true
  • popup: Applied if properties.popup has a non-false value
  • pressed: Applied if properties.pressed is true
  • addon: Applied to the popup icon container if properties.popup has a non-false value
You can’t perform that action at this time.