Styled UI Library

Components

Chip

Chips are concise components symbolizing input, attributes, or actions. They facilitate information entry, content selection, filtering, or the initiation of actions.

Examples

link

Default

The Chip component offers both outlined and filled styling options, providing versatility to match varying design aesthetics.

Default chip
import { Chip } from '@millanbrankovic/styled-ui-library';

function DefaultChipExample() {
  return (
    <Chip label='Default chip' />
  );
};

export default DefaultChipExample;
link

Appearance

Primary, Secondary, Success, Error

For different visual appearance, four options are available: primary, secondary, success, error.

Primary chip
Secondary chip
Success chip
Error chip
import { Chip } from '@millanbrankovic/styled-ui-library';

function AppearanceChipsExample() {
  return (
    <Chip label='Primary chip' appearance='primary' />
    <Chip label='Secondary chip' appearance='secondary' />
    <Chip label='Success chip' appearance='success' />
    <Chip label='Error chip' appearance='error' />
  );
};

export default AppearanceChipsExample;
link

Outlined

outlined (boolean) in combination with appearance removes a background color and replaces it with an appropriate border.

Outlined default
Primary
Secondary
Success
Error
import { Chip } from '@millanbrankovic/styled-ui-library';

function OutlinedChipsExample() {
  return (
    <Chip label='Outlined default' outlined />
    <Chip label='Outlined primary' appearance='primary' outlined />
    <Chip label='Outlined secondary' appearance='secondary' outlined />
    <Chip label='Outlined success' appearance='success' outlined />
    <Chip label='Outlined error' appearance='error' outlined />
  );
};

export default OutlinedChipsExample;
link

Sizes

Small, Default, Large

Three different sizes are available: small, large and a default size if no size prop is passed.

Small chip
Default chip
Large chip
import { Chip } from '@millanbrankovic/styled-ui-library';

function SizesChipExample() {
  return (
    <Chip label='Small chip' size='small' />
    <Chip label='Default chip' />
    <Chip label='Large chip' size='large' />
  );
};

export default SizesChipExample;
link

Chip actions

Clickable

Chips with the clickable prop modify their hover appearance. However, to execute an action upon clicking, the onClick prop must also be provided.

Clickable chip
import { Chip } from '@millanbrankovic/styled-ui-library';

function ClickableChipExample() {
  return (
    <Chip
      label='Clickable chip'
      clickable
      onClick={() => alert('Chip clicked!')}
    />
  );
};

export default ClickableChipExample;
link

Deletable

When onDelete prop is provided it automatically displays a 'delete' icon (ButtonIcon component).

Deletable chip
import { Chip } from '@millanbrankovic/styled-ui-library';

function DeletableChipExample() {
  return (
    <Chip
      label='Deletable chip'
      onDelete={() => alert('Chip deleted!')}
    />
  );
};

export default DeletableChipExample;