Components

Modal

Modal is used to display the content that appears inside a form

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Modal is used to display the content that appears inside a form

To use this component, import { Modal } component from legion-ui

import { Modal } from 'legion-ui';

Variant

Legion Have three variant of Modal

The default of modal is a basic modal, which contains the title, content and other components

import React from 'react';
import { Button, Modal } from 'legion-ui';

const ModalExample = () => {
  const [isActive, setIsActive] = React.useState(false);

  const modalFooter = () => (
    <div style={{ display: 'flex', justifyContent: 'right' }}>
      <Button variant="soft" css={{ marginRight: '12px' }}>

import React, { useState } from 'react';
import { Button, Image, Modal } from 'legion-ui';

const ModalWithImage = () => {
  const [isActiveModal2, setIsActiveModal2] = useState(false);

  const modalFooter2 = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'right' }}>

import React, { useState } from 'react';
import { Button, Image, Modal } from 'legion-ui';

const ModalWithImage2 = () => {
  const [isActiveModal4, setIsActiveModal4] = useState(false);
  const modalFooter4 = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'right' }}>
        <Button onClick={toggleCustomModal4} css={{ marginRight: '12px' }}>

This is modal with custom content, you can pass images, text, and customize modal padding. There are 2 types of modal with content.

Modal with costum content

import React, { useState } from 'react';
import { Button, Modal, Image } from 'legion-ui';

const ModalExample2 = () => {
  const [isActiveModal2, setIsActiveModal2] = useState(false);

  const modalFooter2 = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'right' }}>

Modal with another costum content

import React, { useState } from 'react';
import { Button, Modal, Image } from 'legion-ui';

const ModalExample3 = () => {
  const [isActiveModal4, setIsActiveModal4] = useState(false);
  const modalFooter4 = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'right' }}>
        <Button onClick={toggleCustomModal4} css={{ marginRight: '12px' }}>

Costum modal you can modify the width and height by percent(%) or pixel(px) unit as you need

import React, { useState } from 'react';
import { Button, Modal, Image } from 'legion-ui';

const ModalExample4 = () => {
  const [isActiveModal3, setIsActiveModal3] = useState(false);

  const modalFooter3 = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'center' }}>

Props

property	propType	required	default	desc
children	`React.ReactNode`	-	-	Pass all the necessary components here as a modal body slot.
modalId	String	yes	modal-1	Should a unique string to identify current modal and another if there are more than one modals.
title	String	-	-	Modal title, placed on the top/ header of the modal.
isActive	Boolean	yes	false	Modal state, pass with {true} value to open the modal, vice versa.
iconName	IconName	-	-	Modal icon, placed besides modal title. Ref: React feather icon names.
footer	`React.ReactNode`	-	-	Modal Footer, Can be a slot of several CTA likes buttons, or any necessary components to be placed on modal footer.
onClose	(value: boolean) ⇒ void	yes	-	Function to close the modal (Pass function to turn isActive into {false} ), and another callback function.
width	String	-	50%	Sets custom modal width (can be any units like px, %, vw)
height	String	-	auto	Sets custom modal height (can be any units like px, %, vh)

Do you have feedback?

Please let us know to make it better

Send Feedback

Components

Modal

Modal is used to display the content that appears inside a form

Selected Theme

Select brand or tribe name to preview style

Usage

Variant

Basic Modal

Modal With Image

Modal with Images

Modal with Images 2

Modal With Content

Modal with Images

Modal with Images 2

Modal with Custom Height and Width

Props

Do you have feedback?