Addons

Addons can be added:

• By passing the required tag to the addonLeft/addonRight property.
• By nesting Button.Addon/Button.Text into the component body.

import React from 'react';
import Button from '@semcore/button';
import Badge from '@semcore/ui/badge';
import CheckM from '@semcore/icon/Check/m';

const Demo = () => {
  return (
    <>
      <Button addonLeft={CheckM}>Button</Button>
      <Button ml={2}>
        <Button.Text>Button</Button.Text>
        <Button.Addon>
          <Badge bg='--intergalactic-control-primary-success'>new</Badge>
        </Button.Addon>
      </Button>
    </>
  );
};

export default Demo;

Icon-only button

To use a button with a single icon, you need to wrap it in the <Button.Addon/>.

import React from 'react';
import Button from '@semcore/ui/button';
import CheckM from '@semcore/icon/Check/m';

const Demo = () => {
  return (
    <Button title='Confirm'>
      <Button.Addon>
        <CheckM />
      </Button.Addon>
    </Button>
  );
};

export default Demo;

Button looking like Link

In case you need to render a Button that looks like a Link, use the ButtonLink component.

import React from 'react';
import { ButtonLink } from '@semcore/ui/button';
import { Flex } from '@semcore/ui/flex-box';
import CheckM from '@semcore/icon/Check/m';
import CheckL from '@semcore/icon/Check/l';
import CloseM from '@semcore/icon/Close/m';

const Demo = () => {
  return (
    <Flex direction={'column'} gap={6} alignItems={'flex-start'}>
      <ButtonLink addonLeft={CheckM}>Primary ButtonLink</ButtonLink>
      <ButtonLink addonRight={CloseM} color={'text-critical'}>
        Colored primary ButtonLink
      </ButtonLink>
      <ButtonLink use={'secondary'}>
        <ButtonLink.Addon>
          <CheckM />
        </ButtonLink.Addon>
        <ButtonLink.Text>Secondary ButtonLink</ButtonLink.Text>
      </ButtonLink>
      <ButtonLink use={'secondary'} addonLeft={CheckM} disabled>
        Disabled secondary ButtonLink
      </ButtonLink>
      <ButtonLink addonLeft={CheckM} aria-label={'Icon-only button'} />
      <ButtonLink addonLeft={CheckL} size={500}>
        ButtonLink with another text size
      </ButtonLink>
    </Flex>
  );
};

export default Demo;

Link looking like Button

To create a button that acts like a link, refer to the Link as button example.

Button with no visible text

If there is no visible text in the button, it is necessary to add an aria-label with a short description of an action this button performs.

import React from 'react';
import Button from '@semcore/ui/button';
import CheckM from '@semcore/icon/Check/m';
import CloseM from '@semcore/icon/Close/m';

const Demo = () => {
  return (
    <>
      <Button addonLeft={CheckM} aria-label='Confirm action' mr={2} />
      <Button addonLeft={CloseM} aria-label='Close notification' />
    </>
  );
};

export default Demo;

Button with loading state

You could add a loading prop to the Button or manually add an Addon with Spin if you need the button text to remain visible.

import React from 'react';
import Button from '@semcore/ui/button';
import Spin from '@semcore/ui/spin';

const Demo = () => {
  return (
    <>
      <Button loading>Loading</Button>{' '}
      <Button disabled>
        <Button.Addon>
          <Spin size='xs' />
        </Button.Addon>
        <Button.Text>Loading</Button.Text>
      </Button>
    </>
  );
};

export default Demo;