Button

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 { Button } from '@ocean-network-express/magenta-ui/react';

export const Variants = () => {
  return (
    <div className="flex gap-x-4">
      <Button variant="fill">Fill Button</Button>
      <Button variant="ghost">Ghost Button</Button>
      <Button variant="outline">Outline Button</Button>
    </div>
  );
};

Colors

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

Source Code

import { Button } 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">
        <Button color="primary">Primary Fill</Button>
        <Button color="secondary">Secondary Fill</Button>
        <Button color="neutral">Neutral Fill</Button>
        <Button color="danger">Danger Fill</Button>
      </div>

Sizes

Button supports 6 sizes: 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 { Button } from '@ocean-network-express/magenta-ui/react';

export const Sizes = () => {
  return (
    <div className="flex gap-4 items-end flex-wrap">
      <Button size="2xl" leftIcon={<VesselFrontOutline />}>
        2X-Large
      </Button>
      <Button leftIcon={<VesselFrontOutline />} size="xl">
        X-Large
      </Button>

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 { Button } from '@ocean-network-express/magenta-ui/react';

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

With Icons

Button supports icons from the @ocean-network-express/magenta-ui/icons package.
There are 2 props for icons: leftIcon and rightIcon.

Source Code

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

export const Icons = () => {
  return (
    <div className="flex flex-col gap-y-4">
      <div className="flex gap-x-4">
        <Button variant="fill" leftIcon={<VesselFrontOutline />}>
          <span>Left icon</span>
        </Button>

        <Button variant="fill" rightIcon={<BookingOutline />}>

Disabled

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

Source Code

import { Button } from '@ocean-network-express/magenta-ui/react';

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

      <Button variant="ghost" disabled>
        Ghost Button
      </Button>

Loading

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

Source Code

import { Button } from '@ocean-network-express/magenta-ui/react';

export const Loading = () => {
  return (
    <div className="flex flex-col gap-y-8">
      <div className="flex gap-x-4">
        <Button color="primary" variant="fill" loading>
          Fill Button
        </Button>

        <Button color="primary" variant="ghost" loading>
          Ghost Button

Link

Button can be rendered as a link by setting the component prop to a.

Link Button

Disabled Link Button

Source Code

import { Button } from '@ocean-network-express/magenta-ui/react';

export const Link = () => {
  return (
    <div className="flex gap-x-4">
      <Button component="a" href="#" target="_blank">
        Link Button
      </Button>

      <Button component="a" href="#" disabled>
        Disabled Link Button
      </Button>

Full width

Button can be made full width by setting the fullWidth prop to true.

Source Code

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

export const FullWidth = () => {
  return (
    <div className="flex flex-col gap-y-4">
      <Button fullWidth>Full width</Button>

      <Button fullWidth leftIcon={<VesselFrontOutline />} rightIcon={<BookingOutline />}>
        With icons
      </Button>
    </div>

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 { Button } from '@ocean-network-express/magenta-ui/react';

export const Shadow = () => {
  return (
    <div className="flex gap-24 flex-wrap">
      <Button floating leftIcon={<VesselFrontOutline />} size="2xl">
        Shadow Button
      </Button>
      <Button floating variant="outline" leftIcon={<VesselFrontOutline />} size="2xl">
        Shadow Button
      </Button>

Customized ClassName

The Button we use below was ghost variant and custom className.

Source Code

import { Button } from '@ocean-network-express/magenta-ui/react';

export const DarkBgColors = () => {
  return (
    <div
      className="flex flex-col gap-y-4 p-32 mag-justify-center"
      style={{ backgroundColor: 'var(--mag-colors-secondary-600)' }}
    >
      <div className={'gap-x-4 flex'}>
        <Button variant="ghost" color="primary" className="bg-white">
          Primary Ghost
        </Button>

Was this page helpful?