Styled UI Library

Components

Button Icon

Button Icon is prevalent in app bars and toolbars. A Button Icon triggers an event or action. It is also suitable for toggle functions, like selecting or deselecting a single choice, as in adding or removing a star from an item.

Examples

link

Default

The default ButtonIcon features a transparent background color and size of 24px x 24px. It crucially requires the icon prop. Its appearance and dimensions can be modified using the appearance and size props.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function DefaultButtonIconExample() {
  return (
    <ButtonIcon icon='close' />
  );
};

export default DefaultButtonIconExample;
link

Appearance

Primary

A primary button features a white background color.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function PrimaryButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='primary' />
  );
};

export default PrimaryButtonIconExample;
link

Secondary

A secondary button features a light gray background color.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function SecondaryButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='secondary' />
  );
};

export default SecondaryButtonIconExample;
link

Tertiary

A tertiary comes with a dark background color.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function TertiaryButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='tertiary' />
  );
};

export default TertiaryButtonIconExample;
link

Outlined

The outlined button features a transparent background color and a light gray border.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function OutlinedButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='outlined' />
  );
};

export default OutlinedButtonIconExample;
link

With Shadow

hasShadow also comes handy sometimes.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function WithShadowButtonIconExample() {
  return (
    <ButtonIcon icon='close' hasShadow />
  );
};

export default WithShadowButtonIconExample;
link

Round

The shape can also be transformed into circular by using isRound boolean prop.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function RoundButtonIconExample() {
  return (
    <ButtonIcon icon='close' isRound />
  );
};

export default RoundButtonIconExample;
link

Sizes

Small, Default, Medium, Large, XLarge

The Small form of a button, used for most cases. They are not impactful enough to represent the primary action in a container.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function SizesButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='secondary' size='small' />
    <ButtonIcon icon='close' appearance='secondary' />
    <ButtonIcon icon='close' appearance='secondary' size='medium' />
    <ButtonIcon icon='close' appearance='secondary' size='large' />
    <ButtonIcon icon='close' appearance='secondary' size='xlarge' />
  );
};

export default SizesButtonIconExample;
link

States

Disabled

isDisabled prop makes button unusable.

import { ButtonIcon } from '@millanbrankovic/styled-ui-library';

function DisabledButtonIconExample() {
  return (
    <ButtonIcon icon='close' appearance='secondary' isDisabled />
  );
};

export default DisabledButtonIconExample;