Button

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>
	);
}

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>
	);
}

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>
	);
}