Icon Button

Icon Button Colors

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';

export function IconButtonColors() {
  return (
    <div className="flex flex-wrap gap-16 items-center">
      <IconButton icon="x" aria-label="Close" variant="filled" />
      <IconButton
        icon="trash-can"
        aria-label="Delete"
        variant="filled"
        color="destructive"
      />
      <IconButton
        icon="cogs"
        aria-label="Settings"
        variant="filled"
        color="subtle"
      />
    </div>
  );
}

Icon Button Bleed

With bleed

Without bleed

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';

export function IconButtonBleed() {
  return (
    <div className="flex-col gap-16">
      <p className="font-medium font-14">With bleed</p>
      <div className="flex gap-24">
        <IconButton icon="heart" aria-label="Favorite" variant="clear" bleed />
        <IconButton icon="share" aria-label="Share" variant="clear" bleed />
      </div>
      <p className="font-medium font-14">Without bleed</p>
      <div className="flex gap-24">
        <IconButton icon="heart" aria-label="Favorite" variant="clear" />
        <IconButton icon="share" aria-label="Share" variant="clear" />
      </div>
    </div>
  );
}

Icon Button Link

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';

export function IconButtonLink() {
  return (
    <div className="flex gap-16 items-center">
      <IconButton
        icon="info-circled"
        href="#info"
        aria-label="More info"
        variant="filled"
      />
      <IconButton
        icon="cogs"
        href="#settings"
        aria-label="Settings"
        variant="outlined"
      />
      <IconButton
        icon="arrow-up"
        href="#top"
        aria-label="Back to top"
        variant="clear"
      />
    </div>
  );
}

Icon Button Play Pause

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';
import { useState } from 'react';

export function IconButtonPlayPause() {
  const [playing, setPlaying] = useState(false);
  return (
    <div data-color-mode="dark" className="bg-always-black p-24 shape-default">
      <IconButton
        icon={playing ? 'pause' : 'play'}
        aria-label={playing ? 'Pause' : 'Play'}
        variant="filled"
        onClick={() => setPlaying(!playing)}
      />
    </div>
  );
}

Icon Button Disabled

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';

export function IconButtonDisabled() {
  return (
    <div className="flex flex-wrap gap-16 items-center">
      <IconButton icon="x" aria-label="Close" variant="filled" disabled />
      <IconButton icon="x" aria-label="Close" variant="outlined" disabled />
      <IconButton icon="x" aria-label="Close" variant="clear" disabled />
    </div>
  );
}

Icon Button Localized

Show codeHide code

import {
  BackIconButton,
  CloseIconButton,
  ForwardIconButton,
  NextIconButton,
  PlayIconButton,
  PlayPauseIconButton,
  PrevIconButton,
} from '@volvo-cars/react-icons/localized';
import { LocaleProvider } from '@volvo-cars/react-locale-provider';

export function IconButtonLocalized() {
  return (
    <LocaleProvider locale="sv-SE">
      <div className="flex flex-wrap gap-16 items-center">
        <BackIconButton variant="outlined" />
        <PrevIconButton variant="outlined" />
        <NextIconButton variant="outlined" />
        <ForwardIconButton variant="outlined" />
        <CloseIconButton variant="outlined" />
        <PlayIconButton variant="outlined" />
        <PlayPauseIconButton variant="outlined" paused />
      </div>
    </LocaleProvider>
  );
}

Icon Button Localized Interactive

Password hidden

Paused

Show codeHide code

import {
  PlayPauseIconButton,
  ShowPasswordIconButton,
} from '@volvo-cars/react-icons/localized';
import { LocaleProvider } from '@volvo-cars/react-locale-provider';
import { useState } from 'react';

export function IconButtonLocalizedInteractive() {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [paused, setPaused] = useState(true);

  return (
    <LocaleProvider locale="en">
      <div className="flex gap-32 flex-wrap">
        <div className="flex-col items-center gap-4">
          <ShowPasswordIconButton
            passwordVisible={passwordVisible}
            onClick={() => setPasswordVisible(!passwordVisible)}
          />
          <span className="micro">
            {passwordVisible ? 'Password visible' : 'Password hidden'}
          </span>
        </div>
        <div className="flex-col items-center gap-4">
          <PlayPauseIconButton
            paused={paused}
            onClick={() => setPaused(!paused)}
          />
          <span className="micro">{paused ? 'Paused' : 'Playing'}</span>
        </div>
      </div>
    </LocaleProvider>
  );
}