Button

import {Provider} from '@clayui/core';
import Button from '@clayui/button';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/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';

export default function App() {
  return (
    <Provider spritemap="/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';

export default function App() {
  return (
    <Provider spritemap="/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>
  );
}