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

A "Turn Preview Mode Off" button
A “Turn Preview Mode Off” button

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

Default Button Alignment UI
Default Button Alignment UI

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:

Align Pull Left Icon
Align Pull Left Icon

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

Example of passing a conditional icon
Example of passing a conditional icon

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

License Activation Button with Loading State
License Activation Button with 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

Buttons as an Options Panel
Buttons as an Options Panel

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.

Ronald Huereca
By: Ronald Huereca
Published On: on December 29, 2022

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.

Leave a Comment

Your email address will not be published. Required fields are marked *

Default Avatar
Choose an Avatar

Shopping Cart
  • Your cart is empty.
Scroll to Top