SGUI / Development
Icon button
An accessible action name is required even when only an icon is visible.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
An accessible action name is required even when only an icon is visible.
Loading examples…
Loading examples…
Loading examples…
An accessible action name is required even when only an icon is visible.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { IconButton, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
import * as Icons from '@structured-growth/sg-ui/icons';
export default function IconButtonPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Stack direction="row" gap={3} align="center"><IconButton label={"Add lesson"} variant={"text"} tone={"neutral"} disabled={false} loading={false} onPress={() => setAction("Lesson added locally")}><Icons.AddIcon /></IconButton></Stack>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { IconButton, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
import * as Icons from '@structured-growth/sg-ui/icons';
export default function IconButtonPlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Stack direction="row" gap={3} align="center"><IconButton label={"Add lesson"} variant={"text"} tone={"neutral"} disabled={false} loading={false} onPress={() => setAction("Lesson added locally")}><Icons.AddIcon /></IconButton></Stack></ThemeScope>
<ThemeScope density="comfortable"><Stack direction="row" gap={3} align="center"><IconButton label={"Add lesson"} variant={"text"} tone={"neutral"} disabled={false} loading={false} onPress={() => setAction("Lesson added locally")}><Icons.AddIcon /></IconButton></Stack></ThemeScope>
</Stack>
</>
);
}