Icon Button

Icon Button enables users to perform actions, navigate the interface, and interact with features and functionalities.

Variants

Button supports 3 variants: fill, ghost and outline.
Default variant is fill.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Variants = () => {
  return (
    <div className="flex gap-x-4">
      <IconButton variant="fill">
        <VesselFrontOutline />
      </IconButton>
      <IconButton variant="ghost">
        <VesselFrontOutline />
      </IconButton>

Colors

Button supports 4 colors: primary, secondary, neutral and danger.
Default color is primary.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Colors = () => {
  return (
    <div className="flex flex-col gap-y-4">
      <div className="flex gap-x-4">
        <IconButton color="primary">
          <VesselFrontOutline />
        </IconButton>
        <IconButton color="secondary">
          <VesselFrontOutline />

Sizes

Button supports sizes: 3xs, 2xs, xs, sm, md, lg, xl, 2xl and responsive and can be changed by passing the size prop.
Default size is lg.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Sizes = () => {
  return (
    <div className="flex gap-x-4 items-end">
      <IconButton size="2xl">
        <VesselFrontOutline />
      </IconButton>
      <IconButton size="xl">
        <VesselFrontOutline />
      </IconButton>

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const ResponsiveSize = () => {
  return (
    <div className="flex gap-x-4">
      <IconButton size="responsive">
        <VesselFrontOutline />
      </IconButton>
    </div>
  );
};

Disabled

Disabled state can be enabled by setting disabled prop to true.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Disabled = () => {
  return (
    <div className="flex gap-x-4">
      <IconButton variant="fill" disabled>
        <VesselFrontOutline />
      </IconButton>

      <IconButton variant="ghost" disabled>
        <VesselFrontOutline />

Loading

Loading state can be enabled by setting loading prop to true.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Loading = () => {
  return (
    <div className="flex gap-x-4">
      <IconButton variant="fill" loading>
        <VesselFrontOutline />
      </IconButton>

      <IconButton variant="ghost" loading>
        <VesselFrontOutline />

Floating

Button can have floating styles by setting floating prop to true.
Default floating is false.

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { IconButton } from '@ocean-network-express/magenta-ui/react';

export const Floating = () => {
  return (
    <div className="flex gap-x-24">
      <IconButton floating size="2xl">
        <VesselFrontOutline />
      </IconButton>
      <IconButton floating variant="outline" size="2xl">
        <VesselFrontOutline />
      </IconButton>

Was this page helpful?