SGUI / Development
LinkUrlModal
Editable link text and protocol policy, including relative URLs and removing links.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Editable link text and protocol policy, including relative URLs and removing links.
Loading examples…
Loading examples…
Loading examples…
Read the course guide: https://example.com/guide
Editable link text and protocol policy, including relative URLs and removing links.
Read the course guide: https://example.com/guide
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Read the course guide","url":"https://example.com/guide"});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['http','https','mailto','tel']} allowRelativeUrls={true} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Editable link text and protocol policy, including relative URLs and removing links.
Read the course guide: https://example.com/guide
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Read the course guide","url":"https://example.com/guide"});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['http','https','mailto','tel']} allowRelativeUrls={true} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Editable link text and protocol policy, including relative URLs and removing links.
Read the course guide: https://example.com/guide
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Read the course guide","url":"https://example.com/guide"});
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['https']} allowRelativeUrls={false} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Editable link text and protocol policy, including relative URLs and removing links.
Course overview: /courses/overview
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Course overview","url":"/courses/overview"});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['http','https','mailto','tel']} allowRelativeUrls={true} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Editable link text and protocol policy, including relative URLs and removing links.
Contact the course team: mailto:team@example.com
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Contact the course team","url":"mailto:team@example.com"});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['http','https','mailto','tel']} allowRelativeUrls={true} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Editable link text and protocol policy, including relative URLs and removing links.
Keep this existing text: Link removed
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, LinkUrlModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function LinkUrlModalExample() {
const [open,setOpen] = useState(false);
const [link,setLink] = useState({"displayText":"Keep this existing text","url":""});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Edit destination</Button><Typography role="status">{link.displayText}: {link.url||'Link removed'}</Typography><LinkUrlModal open={open} title={"Building a thoughtful learning experience"} initialDisplayText={link.displayText} initialUrl={link.url} allowedProtocols={['http','https','mailto','tel']} allowRelativeUrls={true} onClose={()=>setOpen(false)} onSubmit={next=>{setLink({displayText:next.displayText,url:next.url??''});setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}