Skip to main content

Button

The simple yet powerful button. ravixUI has multiple types of buttons available out of the box.

Design Hints
Buttons serve as interactive elements that allow users to engage with web pages or websites. While colors can be customized to align with a website's branding, it's important to consider the potential semantic meanings associated with certain hues. For instance, colors like yellow, green, and red can convey additional context about the action a button will perform. Incorporating icons alongside buttons can provide additional information when appropriate. Hover effects can be used to indicate button states, but it's worth noting that this functionality will not translate to touchscreen interfaces. If an action is hard to reverse or irreversible, add confirmation screens or modals to prevent accidental actions.
Accessiblity Hints
Instead of disabling buttons, consider giving feedback using alerts or modals when a user clicks a button with appropriate messages for why the user cannot proceed. Disabling it will make the button unable to receive focus which will remove its accessible nature. When modifying colored elements such as background or text, it's crucial to verify that the color contrast meets accessibility standards. Icons can be used alongside buttons, and it may be tempting to remove text from certain buttons if the icons convey all the information, but you will have to consider screen reader requirements for which there are examples available below. Choose icons which offer additional semantic meaning or familiarity for the user .You can utilize tools or browser extensions that support WCAG guidelines or use dedicated color contrast checkers. Regarding these buttons, the 'type' attribute is set to 'button' for all blocks by default. However, if these buttons are part of a form, you'll need to change the 'type' to 'submit'. ravixUI has predetermined semantic usages for green, red, and yellow colors, but you're free to modify these choices.

Note: All the icons used in this section are available in iconify.design .

Simple Button

Simple buttons for different types of actions. Note that you will need to connect actions to the button using javascript or using a javascript framework.

Note: The default button uses a subtle indigo color for the shadow using the shadow-indigo-300/40 utility.

Simple Button With Icons

The Simple button with icons.

Note: aria-hidden=true is added to the svg icons as an attribute to hide it from screen readers to prevent duplication for screen readers since we have button labels explaining the button’s action.

This is a tailwindCSS wrapper on the <a> tag to make it look like a button. Useful for internal navigation to different parts of a page and also between different pages in your project.

Design Hints
Using icons is recommended for navigational buttons. For external links leading to other websites, it is preferable to employ inline anchor tags accompanied by underlined text. If you choose to adopt a button-like appearance for anchor tags directing users to external sites, ensure that there are clear indicators on the button that clicking it will redirect the user away from your website.

Accessible Icon Only Button

The accessible icon only button. Useful when dealing with limited space on a webpage.

Note: We use title="" attribute to create a tooltip to give additional information to the user when they hover over the button and aria-label="" attribute for screenreaders. Most screenreaders will only callout aria-label attribute or the title attribute . aria-hidden=true is added to the svg icons as an attribute to hide it from screen readers to prevent duplicate callouts.

Design Hints
For actions that are widely recognized, such as settings, favorites, or sharing, it is recommended to utilize familiar icons. However, in scenarios where an icon-only button triggers an uncommon action on touchscreen devices, where tooltips are not functional, it may be necessary to provide a tutorial for first-time users and a dedicated help section for returning users. Additionally, adding a confirmation modal for such buttons can help prevent unintentional actions by users. The Restore Defaults button above serves as a good example of an action that, while potentially familiar to users, warrants additional confirmation before execution.

Stylized Buttons

These buttons are stylized and can be used to add a bit of flair to your page.

Note: The gradients are easy to modify using tailwind. For the second row buttons, shadow ( box shadow ) is used with arbitrary value to produce the effects. To easily visualize and customize the gradients you can use the Tailwind Gradient Generator .

Design Hints
While these buttons are accessible, use them sparingly since it can distract the user away from the content. The perfect use case would be a one off button like a CTA.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple ButtonYesYesYesYesYes
Simple Button With IconsYesYesYesYesYes
Link ButtonYesYesYesYesYes
Accessible Icon Only ButtonYesYesYesYesYes
Stylized ButtonYesYesYesYesYes

ravixUI uses the semantic <button> element for all non link buttons and <a> element for link buttons. The size of the buttons meet the minimum target size for interactive elements as defined by the WCAG 2.1 specification. . The minimum target size for all the buttons in this context, i.e., with the fonts used, the outer containers of the buttons etc. is 44 x 44 px.

While the 44px X 44px target size is important, another important factor to note is that there should be ample space between clickable areas of buttons placed next to each other.