Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @clayui/button with all npm packages installed. Try it out:

require("@clayui/css/package.json"); // @clayui/css is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var button = require("@clayui/button")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@clayui/button v3.5.0

ClayButton component

title: 'Buttons' description: 'Buttons communicate an action to happen on user interaction.' lexiconDefinition: '' packageNpm: '@clayui/button'

import { ButtonDisplayTypes, ButtonGroup, ButtonIcon, } from '$packages/clay-button/docs/index';

Display Types

You can determine how your button can be displayed using the displayType property:

Set displayType to unstyled to reset all the stylings from Bootstrap 4.

If you want use the button as a link set displayType to link.


You can use the variant ClayButton.Group for creating button groups:

Use the spaced property to create spacing between buttons.


You can use the high-level component ClayButtonWithIcon to create a button with only an icon. If you need an icon and text, you need to compose with ClayIcon


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free