Show and Tell: the WordPress Button Component – Four Examples

The WordPress Button Component is very versatile, so I thought I’d show you some ways I have used it throughout my code.

Let’s start with some examples and work backward regarding attributes and props.

Example 1: Turn off preview mode in QuotesDLX

I added a link in the sidebar options of the Block Editor so that I could disable a preview mode that I have as a plugin feature.

const previewBlockInspectorControls = (
	<>
		<PanelBody
			initialOpen={ true }
			title={ __( 'Preview Mode Active', 'quotes-dlx' ) }
		>
			<Button
				variant="link"
				onClick={ ( e ) => {
					setAttributes( { preview: false } );
				} }
			>
				{ __( 'Turn Preview Mode Off', 'quotes-dlx' ) }
			</Button>
		</PanelBody>
	</>
);
Code language: JavaScript (javascript)

Let’s go over the highlighted attributes.

The variant attribute

The variant attribute (non-required) is what the button’s style should be.

The variant attribute’s value can be:

• primary
• secondary
• tertiary
• link

If you’re using the Block Editor, all of these variant styles will be styled for you. In the above example, I used “link” as my variant value so that the button would look like a link.

The onClick Attribute

The onClick attribute is just so you can capture when a button has been clicked. It is required to pass in this attribute.

<Button
	variant="link"
	onClick={ ( e ) => {
		setAttributes( { preview: false } );
	} }
>
	{ __( 'Turn Preview Mode Off', 'quotes-dlx' ) }
</Button>
Code language: JavaScript (javascript)

In this callback, I just set a preview block attribute to false.

Example 2: Add a group of alignment buttons to a React admin

In my WordPress projects, I stick with WordPress components. So when I coded an admin panel in React, using WP components was a foregone conclusion.

In this example, I add a group of buttons that will offer alignment options.

<Controller
	name="tweetButtonAlignment"
	control={ control }
	render={ ( { field: { onClick, value } } ) => (
		<ButtonGroup className="qdlx-admin__button-group--align">
			<label>
				{ __( 'Default Button Alignment', 'quotes-dlx' ) }
			</label>
			<Button
				variant="primary"
				icon="align-pull-left"
				label={ __( 'Align Left', 'quotes-dlx' ) }
				title={ __( 'Align Left', 'quotes-dlx' ) }
				className={ classNames( {
					'is-active': 'left' === value,
				} ) }
				onClick={ ( e ) => {
					setValue( 'tweetButtonAlignment', 'left', {
						shouldDirty: true,
					} );
				} }
			/>
			<Button
				variant="primary"
				icon="align-center"
				label={ __( 'Align Center', 'quotes-dlx' ) }
				title={ __( 'Align Center', 'quotes-dlx' ) }
				className={ classNames( {
					'is-active': 'center' === value,
				} ) }
				onClick={ ( e ) => {
					setValue( 'tweetButtonAlignment', 'center', {
						shouldDirty: true,
					} );
				} }
			/>
			<Button
				variant="primary"
				icon="align-pull-right"
				label={ __( 'Align Right', 'quotes-dlx' ) }
				title={ __( 'Align Right', 'quotes-dlx' ) }
				className={ classNames( {
					'is-active': 'right' === value,
				} ) }
				onClick={ ( e ) => {
					setValue( 'tweetButtonAlignment', 'right', {
						shouldDirty: true,
					} );
				} }
			/>
			<p className="components-base-control__help">
				{ __(
					'Right alignment is recommended.',
					'quotes-dlx'
				) }
			</p>
		</ButtonGroup>
	) }
/>
Code language: JavaScript (javascript)

There’s a bit going on here, but there are three Button components within a ButtonGroup component just to make things a bit cleaner.

Let’s look at one of the buttons:

<Button
	variant="primary"
	icon="align-pull-left"
	label={ __( 'Align Left', 'quotes-dlx' ) }
	title={ __( 'Align Left', 'quotes-dlx' ) }
	className={ classNames( {
		'is-active': 'left' === value,
	} ) }
	onClick={ ( e ) => {
		setValue( 'tweetButtonAlignment', 'left', {
			shouldDirty: true,
		} );
	} }
/>Code language: JavaScript (javascript)

The variant attribute

variant="primary"Code language: JavaScript (javascript)

All three buttons are set as primary. I didn’t use the variant attribute here for any style purposes. Instead, I used classes.

The icon attribute

icon="align-pull-left"Code language: JavaScript (javascript)

A benefit of using WordPress components in the admin is the presence of dashicons. And with the icon attribute, you can use any of the dashicons in your components.

I set the icon attribute to “align-pull-left”, which corresponds to this dashicon:

You can also pass icon an SVG component for custom icons.

The label attribute

label={ __( 'Align Left', 'quotes-dlx' ) }Code language: JavaScript (javascript)

The label attribute provides the aria-label of the button for accessibility. Since I have tooltips enabled, the label also acts as my tooltip text.

The label is not the button text and you can have an icon-only button by providing no children to the button component.

The title attribute

title={ __( 'Align Left', 'quotes-dlx' ) }Code language: JavaScript (javascript)

The title attribute just sets the HTML label title attribute. This provides a form of a tooltip when you hover over a button.

The className attribute

className={ classNames( {
    'is-active': 'left' === value,
} ) }Code language: JavaScript (javascript)

className is a normal react attribute for setting CSS classes for a component. I’m using the react library classnames to dynamically set a CSS class.

Example 3: Show Loading State

I needed a button for a license activation screen. I made the decision to show the loading or “saving” state on the button itself.

return (
	<>
		<Button
			className={ classNames(
				'qdlx__btn qdlx__btn-primary qdlx__btn--icon-right',
				{ 'has-error': hasErrors() },
				{ 'has-icon': saving },
				{ 'is-saving': { saving } }
			) }
			type="submit"
			text={ saving ? saveTextLoading : saveText }
			icon={ saving ? Spinner : false }
			iconSize="18"
			iconPosition="right"
			disabled={ saving || revokingLicense }
		/>
	</>
);Code language: JavaScript (javascript)

The type attribute

type="submit"
Code language: JavaScript (javascript)

This is just a normal input type. Since my button acts as a submit button, I give it the type of submit.

The text attribute

text={ saving ? saveTextLoading : saveText }Code language: JavaScript (javascript)

The text attribute will assign the text of the button. In the above snippet, I have a saving state, and the text of the button changes if someone submits the form.

The icon attribute

icon={ saving ? Spinner : false }Code language: JavaScript (javascript)

In this particular case, I’m showing an icon (a loading icon) only when the form is being saved/submitted.

The iconSize attribute

iconSize="18"Code language: JavaScript (javascript)

The iconSize attribute dictates the size of the icon.

The iconPosition attribute

iconPosition="right"Code language: JavaScript (javascript)

The iconPosition attribute allows for aligning the icon within the button. You can align it left or right.

The disabled attribute

disabled={ saving || revokingLicense }Code language: JavaScript (javascript)

I set up a condition so that the button would be disabled if a form was being saved or a reset occurred.

Example 4: Buttons as Options

To mimic block patterns a bit, I decided to include buttons that acted as radio buttons when selected in the block editor.

<PanelRow>
	<BaseControl id="alerts-dlx-variants-button-group" label={ __( 'Set the Alert Variant', 'quotes-dlx' ) } className="alerts-dlx-chakra-variants">
		<ButtonGroup>
			<Button
				variant={ variant === 'subtle' ? 'primary' : 'secondary' }
				onClick={ ( e ) => {
					setAttributes( {
						variant: 'subtle',
					} );
				} }
			>
				{ __( 'Subtle', 'alerts-dlx' ) }
			</Button>
			<Button
				variant={ variant === 'solid' ? 'primary' : 'secondary' }
				onClick={ ( e ) => {
					setAttributes( {
						variant: 'solid',
					} );
				} }
			>
				{ __( 'Solid', 'alerts-dlx' ) }
			</Button>
			<Button
				variant={ variant === 'left-accent' ? 'primary' : 'secondary' }
				onClick={ ( e ) => {
					setAttributes( {
						variant: 'left-accent',
					} );
				} }
			>
				{ __( 'Left Accent', 'alerts-dlx' ) }
			</Button>
			<Button
				variant={ variant === 'top-accent' ? 'primary' : 'secondary' }
				onClick={ ( e ) => {
					setAttributes( {
						variant: 'top-accent',
					} );
				} }
			>
				{ __( 'Top Accent', 'alerts-dlx' ) }
			</Button>
			<Button
				variant={ variant === 'centered' ? 'primary' : 'secondary' }
				onClick={ ( e ) => {
					setAttributes( {
						variant: 'centered',
					} );
				} }
			>
				{ __( 'Centered', 'alerts-dlx' ) }
			</Button>
		</ButtonGroup>
	</BaseControl>
</PanelRow>Code language: JavaScript (javascript)

The only attribute worth mentioning here is variant. Since we’re in the block editor for this snippet, WP styles are present. I just test a variant attribute and set the button as primary only when the correct variant is present.

Conclusion

I gave four examples of how I have used the Button component. If this was useful for you, please let me know in the comments.