Shortcut

Shortcuts are UI elements that allow users to quickly select pre-defined time ranges or filter presets.

Variants and States

The Shortcut component is a specialized Button designed for shortcut actions. It inherits base functionality from the Button component, ensuring consistency and accessibility across the design system.
The key difference from the Button component is that Shortcut is always set to the outline variant, with no option to modify it.
States:
- Default: Use color="neutral" for inactive shortcut.
- Active: Use color="primary"for active shortcut.

Source Code

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

export function Variants() {
  return (
    <div className="flex flex-row gap-x-8">
      <Shortcut color="neutral">Default Shortcut</Shortcut>
      <Shortcut color="primary">Active Shortcut</Shortcut>
    </div>
  );
}

To control the default and active states, use a state variable and update its color on click:

Source Code

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

export function States() {
  const [active, setActive] = React.useState(false);
  return (
    <Shortcut
      size="lg"
      disabled={false}
      fullWidth={false}
      color={active ? 'primary' : 'neutral'}

Sizes

Shortcut supports 4 sizes sm, md, lg, and responsive and can be changed by passing the size prop.
Default size is lg.

Source Code

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

export function Sizes() {
  return (
    <div className="flex flex-row gap-x-8 items-center">
      <Shortcut size="sm">Small Shortcut</Shortcut>
      <Shortcut size="md">Medium Shortcut</Shortcut>
      <Shortcut size="lg">Large Shortcut</Shortcut>
    </div>
  );
}

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

export function Responsive() {
  return <Shortcut size="responsive">Responsive Shortcut</Shortcut>;
}

With Icon

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

Source Code

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

export function WithIcon() {
  return <Shortcut leftIcon={<VesselFrontOutline />}>Shortcut with icon</Shortcut>;
}

Disabled

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

Source Code

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

export function Disabled() {
  return <Shortcut disabled>Disabled Shortcut</Shortcut>;
}

Was this page helpful?