Skip the navigation

Button

The button component is a fundamental interactive element that allows users to initiate an action.

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Core

Usage

import { Button } from "@caesars-ui/core"

The Button component is intended to be used for interactions. The only event it handles is onClick which you can pass any function you'd like to happen on click/tap events.

It is not possible to easily manipulate what the buttons look like (by design), however it is possible to get custom variants for your the Button component. If your team needs a special Button, please reach out to the design system team.


Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The button component has a clear visual indication that it is a button, such as a shape or label that distinguishes it from other page elements. It has sufficient contrast with the background to be easily visible, and any hover or focus states are also clearly distinguishable.
Operable
Ready
Users can interact with the button using a variety of input methods, including keyboard and mouse. The button also has a consistent behavior across the site, so that users can anticipate what will happen when they click on it.
Understandable
Ready
The button’s label or icon clearly communicates its purpose or the action that it will trigger. Users also receive appropriate feedback after clicking the button, such as a success message or a change in page content.
Robust
Ready
The button component is accessible to users with a range of abilities and devices, and adheres to web standards and best practices. The component is also tested thoroughly to ensure that it functions correctly in a variety of contexts and situations.