Button

Buttons communicate an action to happen on user interaction.

installyarn add @clayui/button
versionNPM Version
useimport Button from '@clayui/button';

Table of Contents

Display Types

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

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

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Button from '@clayui/button';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Button.Group spaced>
					<Button displayType="primary">Button Primary</Button>
					<Button displayType="secondary">Button Secondary</Button>
					<Button displayType="link">Button Link</Button>
					<Button borderless>Button Borderless</Button>
				</Button.Group>
			</div>
		</Provider>
	);
}

Group

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

Use the spaced property to create spacing between buttons.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Button from '@clayui/button';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Button.Group>
					<Button>This</Button>
					<Button displayType="secondary">is</Button>
					<Button>a</Button>
					<Button displayType="secondary">button</Button>
					<Button>group.</Button>
				</Button.Group>
			</div>
		</Provider>
	);
}

Icon

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

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Button, {ClayButtonWithIcon} from '@clayui/button';
import Icon from '@clayui/icon';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayButtonWithIcon
					aria-label="Close"
					symbol="times"
					title="Close"
				/>
				<Button>
					<span className="inline-item inline-item-before">
						<Icon symbol="times" />
					</span>
					Close w/ text
				</Button>
			</div>
		</Provider>
	);
}

API Reference

ClayButtonWithIcon

React.ForwardRefExoticComponent<Omit<ICommonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>
Parameters
Properties

symbol *

string

The id of the icon in the spritemap.

Deprecated

small

boolean | undefined

Indicates button should be a small variant.

aria-label

string | undefined

aria-labelledby

string | undefined

spritemap

string | undefined

Path to the location of the spritemap resource.

displayType

DisplayType | undefined

Determines the button variant to use. The values beta and beta-dark are deprecated since v3.100.0 - use translucent and dark instead. The values null and unstyled are for internal use only.

block

boolean | undefined

Renders the button as a block element.

monospaced

boolean | undefined

Flag to indicate if button should be monospaced.

borderless

boolean | undefined

Flag to indicate if the button should be borderless.

outline

boolean | undefined

Flag to indicate if the button should use the outline variant.

size

"regular" | "xs" | "sm" | undefined

Determines the size of a button.

alert

boolean | undefined

Flag to indicate if button is used within an alert component.

translucent

boolean | undefined

Flag to indicate if the button should use the translucent variant.

dark

boolean | undefined

Flag to indicate if the button should use the clay-dark variant.

rounded

boolean | undefined

Flag to indicate if the button should be shaped like a pill.

loading

boolean | undefined

Flag to display a loading indicator.

Returns
ReactNode

Group

{ ({ children, className, role, spaced, vertical, ...otherProps }: Props): JSX.Element; displayName: string; }
Parameters
Properties

spaced

boolean | undefined

Flag to indicate the spacing between the buttons.

vertical

boolean | undefined

Flag to indicate if buttons are stacked vertically.

Returns
Element
Edit this page on GitHub

Table of Contents