Button

Buttons communicate an action to happen on user interaction.

install	yarn add @clayui/button
version
use	`import Button from '@clayui/button';`

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 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 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 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 spritemap={spritemap} symbol="times" />
					</span>
					Close w/ text
				</Button>
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Display Types
Group
Icon