Button

Variants

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

Colors

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

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.

• 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

With Icons

• Button 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.

Loading

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

Link

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

Full width

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

Floating

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

Customized ClassName - Button on color

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