Developer Addons
Addons can be added:
- By passing the required
tagto theaddonLeft/addonRightproperty. - By nesting
Button.Addon/Button.Textinto the component body.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import Badge from '@semcore/ui/badge';
import CheckM from 'intergalactic/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;import React from 'react';
import Button from 'intergalactic/button';
import Badge from '@semcore/ui/badge';
import CheckM from 'intergalactic/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;Button with icon
To use a button with a single icon, you need to wrap it in the <Button.Addon/>.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import { Hint } from 'intergalactic/tooltip';
import CheckM from 'intergalactic/icon/Check/m';
const Demo = () => {
return (
<Button aria-label='Confirm'>
<Button.Addon tag={Hint} title={'Confirm'}>
<CheckM />
</Button.Addon>
</Button>
);
};
export default Demo;import React from 'react';
import Button from 'intergalactic/button';
import { Hint } from 'intergalactic/tooltip';
import CheckM from 'intergalactic/icon/Check/m';
const Demo = () => {
return (
<Button aria-label='Confirm'>
<Button.Addon tag={Hint} title={'Confirm'}>
<CheckM />
</Button.Addon>
</Button>
);
};
export default Demo;Link as 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.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
import CloseM from 'intergalactic/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;import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
import CloseM from 'intergalactic/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.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import Spin from 'intergalactic/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;import React from 'react';
import Button from 'intergalactic/button';
import Spin from 'intergalactic/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;