BorderlessButton
A control that initiates an action. Styled without any borders.
Usage
Use the is attribute to style a button as a borderless-button.
View code
borderless-button.html
html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="https://unpkg.com/@swiftwc/ui@dev/css" />
<script type="module" src="https://unpkg.com/@swiftwc/ui@dev/client"></script>
<script type="module">
import { alert } from 'https://unpkg.com/@swiftwc/ui@dev/client'
document.addEventListener('click', async (evt) => {
if (!(evt.target instanceof HTMLElement)) return
if (!evt.target.closest('button')) return
await self.customElements.whenDefined('borderless-button')
void alert('hello', 'world')
})
</script>
</head>
<body>
<v-keyboard system-font="Inter"></v-keyboard>
<navigation-stack>
<scroll-view>
<v-stack>
<button is="borderless-button" type="button">
<label-view title="Hello world!" system-image="hand-waving"></label-view>
</button>
</v-stack>
</scroll-view>
</navigation-stack>
</body>
</html>Relationships
Conforms To
HTMLButtonElement