Styled UI Library

Components

Button

Buttons are clickable elements that enable users to initiate actions or make choices with a single click, providing clear cues about the subsequent events or outcomes.

Examples

link

Default

The button's default style is suitable for many scenarios but may not be impactful enough to denote a primary action within a container. The Button offers six distinct variants: primary, secondary, subtle, link, text and danger, which can be specified using the respective appearance prop.

infoinfo

NOTE

Button will have a default appearance if no appearance prop is passed.

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

function DefaultButtonExample() {
  return (
    <Button title='Default button' />
  );
};

export default DefaultButtonExample;
link

Appearance

Primary

A button component accepts an optional appearance prop. A primary button emphasizes the most significant call to action on a page or in a view. Not all containers or screens necessitate a primary button.

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

function PrimaryButtonExample() {
  return (
    <Button title='Primary button' appearance='primary' />
  );
};

export default PrimaryButtonExample;
link

Secondary

A secondary button with a thin border is used for subordinate actions.

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

function SecondaryButtonExample() {
  return (
    <Button title='Secondary button' appearance='secondary' />
  );
};

export default SecondaryButtonExample;
link

Subtle

A subtle button is typically used for less-pronounced actions.

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

function SubtleButtonExample() {
  return (
    <Button title='Subtle button' appearance='subtle' />
  );
};

export default SubtleButtonExample;
link

A link button is used to navigate to another page in the same window, while mimicking the appearance of a link.

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

function LinkButtonExample() {
  return (
    <Button title='Link button' appearance='link' />
  );
};

export default LinkButtonExample;
link

Danger

A danger button appears as a final confirmation for a destructive action such as deleting.

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

function DangerButtonExample() {
  return (
    <Button title='Danger button' appearance='danger' />
  );
};

export default DangerButtonExample;
link

Rounded

By using the isRound prop, a button can be transformed into a rounded shape.

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

function RoundedButtonExample() {
  return (
    <Button title='Rounded button' appearance='primary' isRound />
  );
};

export default RoundedButtonExample;
link

Full-width button

By using the fullWidth prop, buttons can be expanded to full width to fill its parent container.

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

function FullWidthButtonExample() {
  return (
    <Button title='Full width button' fullWidth />
  );
};

export default FullWidthButtonExample;
link

'as' polymorphic prop

The as prop determines what Element the component will render as. Given that the button component accepts as polymorphic prop, it can morph into an <a href=''> Element while retaining the visual aesthetics of a button

As Link button
import { Button } from '@millanbrankovic/styled-ui-library';

function AsLinkButtonExample() {
  return (
    <Button
      title='As link button'
      as='a'
      href='https://www.google.com'
      target='_blank'
      appearance='primary' 
    />
  );
};

export default AsLinkButtonExample;

// Output
<a href='https://www.google.com' target='_blank' />
link

Sizes

Small, Default, Medium, Large

Buttons are available in four different sizes: small, medium, large, which can be specified using the respective size prop. Button will have a default size if no size prop is passed.

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

function SizeButtonExamples() {
  return (
    <Button title='Small button' appearance='primary' size='small' />
    <Button title='Default button' appearance='primary' />
    <Button title='Medium button' appearance='primary' size='medium' />
    <Button title='Large button' appearance='primary' size='large' />
  );
};

export default SizeButtonExamples;
link

Button with icon

Icon before

Buttons may include an icon before the text by using iconPosition prop.

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

function IconBeforeButtonExample() {
  return (
    <Button title='Icon left' icon={{ icon: 'check-circle' }} iconPosition='left' />
  );
};

export default IconBeforeButtonExample;
link

Icon after

Buttons may include an icon after the text by using iconPosition prop.

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

function IconAfterButtonExample() {
  return (
    <Button title='Icon right' icon={{ icon: 'check-circle' }} iconPosition='right' />
  );
};

export default IconAfterButtonExample;
link

Icon color

It's even possible to change icon color by specifying a stroke key as part of the icon object prop.

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

function IconColorButtonExample() {
  return (
    <Button
      title='Button icon'
      icon={{ icon: 'play-circle', stroke: 'red-quaternary' }}
      iconPosition='right'
    />
  );
};

export default IconColorButtonExample;
link

States

Loading

By setting isLoading prop, it indicates the button is loading. The button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.

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

function LoadingButtonExample() {
  return (
    <Button title='Loading button' isLoading />
  );
};

export default LoadingButtonExample;
link

Disabled

isDisabled prop makes button unusable.

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

function DisabledButtonExample() {
  return (
    <Button title='Disabled button' isDisabled />
  );
};

export default DisabledButtonExample;