Developer Addons
Addons can be installed either by passing the required tag to the addonLeft/addonRight property or by unrending Button.Addon/Button.Text into the component body. The examples below are the same.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
import ArrowRightM from 'intergalactic/icon/ArrowRight/m';
const Demo = () => {
return (
<>
<Button addonLeft={CheckM} addonRight={ArrowRightM}>
Button
</Button>
<Button ml={2}>
<Button.Addon>
<CheckM />
</Button.Addon>
<Button.Text>Button</Button.Text>
<Button.Addon>
<ArrowRightM />
</Button.Addon>
</Button>
</>
);
};
export default Demo;import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
import ArrowRightM from 'intergalactic/icon/ArrowRight/m';
const Demo = () => {
return (
<>
<Button addonLeft={CheckM} addonRight={ArrowRightM}>
Button
</Button>
<Button ml={2}>
<Button.Addon>
<CheckM />
</Button.Addon>
<Button.Text>Button</Button.Text>
<Button.Addon>
<ArrowRightM />
</Button.Addon>
</Button>
</>
);
};
export default Demo;Button with Icon
To use a button with a single icon, you need to wrap it in an <Button.Addon/>.
tsx
import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
const Demo = () => {
return (
<Button aria-label='Confirm'>
<Button.Addon>
<CheckM />
</Button.Addon>
</Button>
);
};
export default Demo;import React from 'react';
import Button from 'intergalactic/button';
import CheckM from 'intergalactic/icon/Check/m';
const Demo = () => {
return (
<Button aria-label='Confirm'>
<Button.Addon>
<CheckM />
</Button.Addon>
</Button>
);
};
export default Demo;Button accessibility
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;