Shortcut

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.

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

Sizes

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

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

With Icon

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

Disabled

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