0
# Button and Typography Components
1

2
@mantine/core provides comprehensive button and typography components for creating interactive elements and displaying text content with consistent styling, accessibility features, and theme integration.
3

4
## Button Components
5

6
### Button
7

8
Primary button component with extensive styling options and variants.
9

10
```typescript { .api }
11
interface ButtonProps {
12
  /** Button children */
13
  children?: React.ReactNode;
14
  /** Button variant */
15
  variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'transparent' | 'white' | 'default' | 'gradient';
16
  /** Button size */
17
  size?: MantineSize | string;
18
  /** Button color */
19
  color?: MantineColor;
20
  /** Button radius */
21
  radius?: MantineRadius;
22
  /** If true, button will take full width of container */
23
  fullWidth?: boolean;
24
  /** If true, button will be compact */
25
  compact?: boolean;
26
  /** Button left section */
27
  leftSection?: React.ReactNode;
28
  /** Button right section */
29
  rightSection?: React.ReactNode;
30
  /** If true, button will be disabled */
31
  disabled?: boolean;
32
  /** If true, button will show loading state */
33
  loading?: boolean;
34
  /** Loading text override */
35
  loaderProps?: LoaderProps;
36
  /** Button type */
37
  type?: 'button' | 'submit' | 'reset';
38
  /** Button gradient (for gradient variant) */
39
  gradient?: MantineGradient;
40
  /** If true, button will automatically adjust text contrast */
41
  autoContrast?: boolean;
42
  /** Button component type */
43
  component?: React.ElementType;
44
}
45

46
interface ButtonGroupProps {
47
  /** Group children */
48
  children: React.ReactNode;
49
  /** Group orientation */
50
  orientation?: 'horizontal' | 'vertical';
51
  /** If true, buttons will be borderless */
52
  borderWidth?: number;
53
}
54
```
55

56
**Usage Example:**
57

58
```tsx
59
import { Button, Group } from '@mantine/core';
60

61
function ButtonDemo() {
62
  return (
63
    <Group>
64
      <Button variant="filled">Filled button</Button>
65
      <Button variant="light">Light button</Button>
66
      <Button variant="outline">Outline button</Button>
67
      <Button variant="subtle">Subtle button</Button>
68
      <Button variant="transparent">Transparent button</Button>
69
      <Button variant="white">White button</Button>
70
      <Button variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>
71
        Gradient button
72
      </Button>
73
    </Group>
74
  );
75
}
76

77
// Button with sections
78
function ButtonWithSections() {
79
  return (
80
    <Group>
81
      <Button leftSection="📧" variant="default">
82
        Send email
83
      </Button>
84
      <Button rightSection="→">
85
        Continue
86
      </Button>
87
      <Button 
88
        leftSection="💾" 
89
        rightSection="⌘S"
90
        variant="light"
91
      >
92
        Save file
93
      </Button>
94
    </Group>
95
  );
96
}
97

98
// Button states
99
function ButtonStates() {
100
  return (
101
    <Group>
102
      <Button loading>Loading button</Button>
103
      <Button disabled>Disabled button</Button>
104
      <Button 
105
        loading 
106
        loaderProps={{ type: 'dots' }}
107
      >
108
        Custom loader
109
      </Button>
110
    </Group>
111
  );
112
}
113

114
// Button group
115
function ButtonGroupDemo() {
116
  return (
117
    <Button.Group>
118
      <Button variant="default">First</Button>
119
      <Button variant="default">Second</Button>
120
      <Button variant="default">Third</Button>
121
    </Button.Group>
122
  );
123
}
124
```
125

126
### ActionIcon
127

128
Icon button component for single icon actions.
129

130
```typescript { .api }
131
interface ActionIconProps {
132
  /** Icon children */
133
  children?: React.ReactNode;
134
  /** ActionIcon variant */
135
  variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'transparent' | 'white' | 'default' | 'gradient';
136
  /** ActionIcon size */
137
  size?: MantineSize | string | number;
138
  /** ActionIcon color */
139
  color?: MantineColor;
140
  /** ActionIcon radius */
141
  radius?: MantineRadius;
142
  /** If true, ActionIcon will be disabled */
143
  disabled?: boolean;
144
  /** If true, ActionIcon will show loading state */
145
  loading?: boolean;
146
  /** Loading props */
147
  loaderProps?: LoaderProps;
148
  /** ActionIcon gradient (for gradient variant) */
149
  gradient?: MantineGradient;
150
  /** If true, ActionIcon will automatically adjust text contrast */
151
  autoContrast?: boolean;
152
}
153

154
interface ActionIconGroupProps {
155
  /** Group children */
156
  children: React.ReactNode;
157
  /** Group orientation */
158
  orientation?: 'horizontal' | 'vertical';
159
  /** Group border width */
160
  borderWidth?: number;
161
}
162
```
163

164
**Usage Example:**
165

166
```tsx
167
import { ActionIcon, Group } from '@mantine/core';
168

169
function ActionIconDemo() {
170
  return (
171
    <Group>
172
      <ActionIcon variant="filled" aria-label="Settings">
173
        ⚙️
174
      </ActionIcon>
175

176
      <ActionIcon variant="light" aria-label="Search">
177
        🔍
178
      </ActionIcon>
179

180
      <ActionIcon variant="outline" color="red" aria-label="Delete">
181
        🗑️
182
      </ActionIcon>
183

184
      <ActionIcon loading aria-label="Loading">
185
        📧
186
      </ActionIcon>
187

188
      <ActionIcon size="xl" variant="gradient" gradient={{ from: 'blue', to: 'cyan' }}>
189
        🎨
190
      </ActionIcon>
191
    </Group>
192
  );
193
}
194

195
// ActionIcon group
196
function ActionIconGroupDemo() {
197
  return (
198
    <ActionIcon.Group>
199
      <ActionIcon variant="default" aria-label="Bold">
200
        B
201
      </ActionIcon>
202
      <ActionIcon variant="default" aria-label="Italic">
203
        I
204
      </ActionIcon>
205
      <ActionIcon variant="default" aria-label="Underline">
206
        U
207
      </ActionIcon>
208
    </ActionIcon.Group>
209
  );
210
}
211
```
212

213
### UnstyledButton
214

215
Base button component without default styles.
216

217
```typescript { .api }
218
interface UnstyledButtonProps {
219
  /** Button children */
220
  children?: React.ReactNode;
221
  /** Button component type */
222
  component?: React.ElementType;
223
  /** If true, button will be disabled */
224
  disabled?: boolean;
225
  /** Called when button is clicked */
226
  onClick?: (event: React.MouseEvent) => void;
227
}
228
```
229

230
**Usage Example:**
231

232
```tsx
233
import { UnstyledButton, Text, Group, rem } from '@mantine/core';
234

235
function UnstyledButtonDemo() {
236
  return (
237
    <UnstyledButton
238
      onClick={() => console.log('clicked')}
239
      style={{
240
        display: 'block',
241
        width: '100%',
242
        padding: rem(14),
243
        borderRadius: rem(4),
244
        color: 'var(--mantine-color-text)',
245
        textDecoration: 'none',
246
        '&:hover': {
247
          backgroundColor: 'var(--mantine-color-gray-0)',
248
        },
249
      }}
250
    >
251
      <Group>
252
        <div>
253
          <Text size="sm" fw={500}>
254
            Custom Button
255
          </Text>
256
          <Text c="dimmed" size="xs">
257
            Built with UnstyledButton
258
          </Text>
259
        </div>
260
      </Group>
261
    </UnstyledButton>
262
  );
263
}
264
```
265

266
### CloseButton
267

268
Specialized close/dismiss button.
269

270
```typescript { .api }
271
interface CloseButtonProps {
272
  /** Close button icon */
273
  icon?: React.ReactNode;
274
  /** Close button size */
275
  size?: MantineSize | number;
276
  /** Close button color */
277
  iconSize?: number;
278
  /** Close button variant */
279
  variant?: 'subtle' | 'transparent';
280
  /** If true, button will be disabled */
281
  disabled?: boolean;
282
}
283
```
284

285
**Usage Example:**
286

287
```tsx
288
import { CloseButton, Group } from '@mantine/core';
289

290
function CloseButtonDemo() {
291
  return (
292
    <Group>
293
      <CloseButton aria-label="Close modal" />
294
      <CloseButton size="xl" />
295
      <CloseButton variant="transparent" />
296
    </Group>
297
  );
298
}
299
```
300

301
### CopyButton
302

303
Button for copying text to clipboard.
304

305
```typescript { .api }
306
interface CopyButtonProps {
307
  /** Value to copy */
308
  value: string;
309
  /** Copy timeout */
310
  timeout?: number;
311
  /** Render function with copy state */
312
  children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;
313
}
314
```
315

316
**Usage Example:**
317

318
```tsx
319
import { CopyButton, ActionIcon, Tooltip, rem } from '@mantine/core';
320

321
function CopyButtonDemo() {
322
  return (
323
    <CopyButton value="https://mantine.dev" timeout={2000}>
324
      {({ copied, copy }) => (
325
        <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
326
          <ActionIcon color={copied ? 'teal' : 'gray'} variant="subtle" onClick={copy}>
327
            {copied ? '✓' : '📋'}
328
          </ActionIcon>
329
        </Tooltip>
330
      )}
331
    </CopyButton>
332
  );
333
}
334
```
335

336
### FileButton
337

338
Button for triggering file selection.
339

340
```typescript { .api }
341
interface FileButtonProps {
342
  /** File input onChange handler */
343
  onChange: (file: File | File[] | null) => void;
344
  /** If true, multiple files can be selected */
345
  multiple?: boolean;
346
  /** Accepted file types */
347
  accept?: string;
348
  /** File input name */
349
  name?: string;
350
  /** File input form */
351
  form?: string;
352
  /** If true, button will be disabled */
353
  disabled?: boolean;
354
  /** Capture mode for mobile devices */
355
  capture?: boolean | 'user' | 'environment';
356
  /** Render function */
357
  children: (props: { onClick: () => void }) => React.ReactNode;
358
  /** File input props */
359
  inputProps?: React.ComponentPropsWithoutRef<'input'>;
360
}
361
```
362

363
**Usage Example:**
364

365
```tsx
366
import { FileButton, Button, Group, Text } from '@mantine/core';
367
import { useState } from 'react';
368

369
function FileButtonDemo() {
370
  const [file, setFile] = useState<File | null>(null);
371

372
  return (
373
    <Group>
374
      <FileButton onChange={setFile} accept="image/png,image/jpeg">
375
        {(props) => <Button {...props}>Upload image</Button>}
376
      </FileButton>
377

378
      {file && (
379
        <Text size="sm" ta="center" mt="sm">
380
          Picked file: {file.name}
381
        </Text>
382
      )}
383
    </Group>
384
  );
385
}
386

387
// Multiple files
388
function MultipleFileButton() {
389
  const [files, setFiles] = useState<File[]>([]);
390

391
  return (
392
    <FileButton onChange={setFiles} accept="image/png,image/jpeg" multiple>
393
      {(props) => <Button {...props}>Upload images</Button>}
394
    </FileButton>
395
  );
396
}
397
```
398

399
### Burger
400

401
Hamburger menu button with animation.
402

403
```typescript { .api }
404
interface BurgerProps {
405
  /** If true, burger is opened */
406
  opened: boolean;
407
  /** Called when burger is clicked */
408
  onClick?: () => void;
409
  /** Burger color */
410
  color?: string;
411
  /** Burger size */
412
  size?: MantineSize | number;
413
  /** Burger line size */
414
  lineSize?: number;
415
  /** Transition duration */
416
  transitionDuration?: number;
417
}
418
```
419

420
**Usage Example:**
421

422
```tsx
423
import { Burger } from '@mantine/core';
424
import { useDisclosure } from '@mantine/hooks';
425

426
function BurgerDemo() {
427
  const [opened, { toggle }] = useDisclosure(false);
428

429
  return (
430
    <Burger
431
      opened={opened}
432
      onClick={toggle}
433
      aria-label={opened ? 'Close navigation' : 'Open navigation'}
434
    />
435
  );
436
}
437
```
438

439
## Typography Components
440

441
### Text
442

443
Flexible text component with styling options.
444

445
```typescript { .api }
446
interface TextProps {
447
  /** Text children */
448
  children?: React.ReactNode;
449
  /** Text size */
450
  size?: MantineSize | string;
451
  /** Text color */
452
  c?: MantineColor;
453
  /** Text weight */
454
  fw?: React.CSSProperties['fontWeight'];
455
  /** Text style */
456
  fs?: React.CSSProperties['fontStyle'];
457
  /** Text decoration */
458
  td?: React.CSSProperties['textDecoration'];
459
  /** Text transform */
460
  tt?: React.CSSProperties['textTransform'];
461
  /** Text align */
462
  ta?: React.CSSProperties['textAlign'];
463
  /** Line height */
464
  lh?: React.CSSProperties['lineHeight'];
465
  /** If true, text will be truncated with ellipsis */
466
  truncate?: boolean | 'start' | 'end';
467
  /** Number of lines to display */
468
  lineClamp?: number;
469
  /** If true, text will inherit parent color */
470
  inherit?: boolean;
471
  /** If true, text will be displayed as span */
472
  span?: boolean;
473
  /** Text variant */
474
  variant?: 'text' | 'gradient';
475
  /** Text gradient (for gradient variant) */
476
  gradient?: MantineGradient;
477
}
478
```
479

480
**Usage Example:**
481

482
```tsx
483
import { Text, Stack } from '@mantine/core';
484

485
function TextDemo() {
486
  return (
487
    <Stack>
488
      <Text>Default text</Text>
489
      <Text size="xs">Extra small text</Text>
490
      <Text size="lg">Large text</Text>
491
      <Text fw={500}>Medium weight text</Text>
492
      <Text fw={700}>Bold text</Text>
493
      <Text fs="italic">Italic text</Text>
494
      <Text td="underline">Underlined text</Text>
495
      <Text c="red">Red text</Text>
496
      <Text c="dimmed">Dimmed text</Text>
497
      <Text tt="uppercase">Uppercase text</Text>
498
      <Text ta="center">Center aligned text</Text>
499
      <Text truncate w={200}>
500
        This text will be truncated if it's too long to fit
501
      </Text>
502
      <Text lineClamp={2}>
503
        This is a long text that will be clamped to 2 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
504
      </Text>
505
      <Text variant="gradient" gradient={{ from: 'blue', to: 'cyan' }}>
506
        Gradient text
507
      </Text>
508
    </Stack>
509
  );
510
}
511
```
512

513
### Title
514

515
Heading component (h1-h6) with size variants.
516

517
```typescript { .api }
518
interface TitleProps {
519
  /** Title children */
520
  children?: React.ReactNode;
521
  /** Title order (1-6) */
522
  order?: 1 | 2 | 3 | 4 | 5 | 6;
523
  /** Title size */
524
  size?: MantineSize | string;
525
  /** Title color */
526
  c?: MantineColor;
527
  /** Title weight */
528
  fw?: React.CSSProperties['fontWeight'];
529
  /** Title style */
530
  fs?: React.CSSProperties['fontStyle'];
531
  /** Title decoration */
532
  td?: React.CSSProperties['textDecoration'];
533
  /** Title transform */
534
  tt?: React.CSSProperties['textTransform'];
535
  /** Title align */
536
  ta?: React.CSSProperties['textAlign'];
537
  /** Line height */
538
  lh?: React.CSSProperties['lineHeight'];
539
  /** If true, title will be truncated */
540
  truncate?: boolean | 'start' | 'end';
541
  /** Number of lines to display */
542
  lineClamp?: number;
543
}
544
```
545

546
**Usage Example:**
547

548
```tsx
549
import { Title, Stack } from '@mantine/core';
550

551
function TitleDemo() {
552
  return (
553
    <Stack>
554
      <Title order={1}>H1 Heading</Title>
555
      <Title order={2}>H2 Heading</Title>
556
      <Title order={3}>H3 Heading</Title>
557
      <Title order={4}>H4 Heading</Title>
558
      <Title order={5}>H5 Heading</Title>
559
      <Title order={6}>H6 Heading</Title>
560
      
561
      <Title order={1} size="h3">H1 with H3 size</Title>
562
      <Title order={2} c="blue">Blue H2</Title>
563
      <Title order={3} ta="center">Centered H3</Title>
564
      <Title order={4} tt="uppercase">Uppercase H4</Title>
565
    </Stack>
566
  );
567
}
568
```
569

570
### Code
571

572
Inline code component with syntax highlighting support.
573

574
```typescript { .api }
575
interface CodeProps {
576
  /** Code children */
577
  children?: React.ReactNode;
578
  /** Code color */
579
  color?: MantineColor;
580
  /** If true, code will be displayed as block */
581
  block?: boolean;
582
  /** Code font size */
583
  fz?: MantineSize | string;
584
  /** Code font weight */
585
  fw?: React.CSSProperties['fontWeight'];
586
}
587
```
588

589
**Usage Example:**
590

591
```tsx
592
import { Code, Text, Stack } from '@mantine/core';
593

594
function CodeDemo() {
595
  return (
596
    <Stack>
597
      <Text>
598
        Install package with <Code>npm install @mantine/core</Code> command
599
      </Text>
600
      
601
      <Code block>
602
        {`import { Button } from '@mantine/core';
603

604
function Demo() {
605
  return <Button>Hello world</Button>;
606
}`}
607
      </Code>
608

609
      <Code color="red">Error in code</Code>
610
      <Code color="teal">Success code</Code>
611
    </Stack>
612
  );
613
}
614
```
615

616
### Mark
617

618
Highlighted text component.
619

620
```typescript { .api }
621
interface MarkProps {
622
  /** Mark children */
623
  children: React.ReactNode;
624
  /** Mark color */
625
  color?: MantineColor;
626
}
627
```
628

629
**Usage Example:**
630

631
```tsx
632
import { Mark, Text } from '@mantine/core';
633

634
function MarkDemo() {
635
  return (
636
    <Text>
637
      Highlight <Mark>important parts</Mark> of your content with{' '}
638
      <Mark color="red">different colors</Mark>
639
    </Text>
640
  );
641
}
642
```
643

644
### Blockquote
645

646
Blockquote component for quoted content.
647

648
```typescript { .api }
649
interface BlockquoteProps {
650
  /** Blockquote children */
651
  children: React.ReactNode;
652
  /** Blockquote color */
653
  color?: MantineColor;
654
  /** Blockquote radius */
655
  radius?: MantineRadius;
656
  /** Blockquote icon */
657
  icon?: React.ReactNode;
658
  /** Blockquote cite */
659
  cite?: React.ReactNode;
660
}
661
```
662

663
**Usage Example:**
664

665
```tsx
666
import { Blockquote } from '@mantine/core';
667

668
function BlockquoteDemo() {
669
  return (
670
    <Blockquote cite="– Forrest Gump">
671
      Life is like a box of chocolates, you never know what you're gonna get
672
    </Blockquote>
673
  );
674
}
675

676
// With icon
677
function BlockquoteWithIcon() {
678
  return (
679
    <Blockquote color="red" cite="– Someone" icon="💡">
680
      Great ideas come from great minds
681
    </Blockquote>
682
  );
683
}
684
```
685

686
### Highlight
687

688
Text highlighting component with search functionality.
689

690
```typescript { .api }
691
interface HighlightProps {
692
  /** Text to highlight */
693
  children: string;
694
  /** Text to highlight */
695
  highlight: string | string[];
696
  /** Highlight color */
697
  color?: MantineColor;
698
  /** Highlight component */
699
  highlightComponent?: React.ComponentType<any>;
700
  /** Highlight styles */
701
  highlightStyles?: React.CSSProperties | ((theme: MantineTheme) => React.CSSProperties);
702
}
703
```
704

705
**Usage Example:**
706

707
```tsx
708
import { Highlight } from '@mantine/core';
709

710
function HighlightDemo() {
711
  return (
712
    <Highlight highlight={['ipsum', 'dolor']}>
713
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
714
    </Highlight>
715
  );
716
}
717

718
// Multiple highlights with custom colors
719
function MultiHighlight() {
720
  return (
721
    <div>
722
      <Highlight highlight="react" color="blue">
723
        React is a JavaScript library for building user interfaces
724
      </Highlight>
725
      
726
      <Highlight highlight={['Vue', 'Angular']} color="red">
727
        Vue and Angular are also popular JavaScript frameworks
728
      </Highlight>
729
    </div>
730
  );
731
}
732
```
733

734
### Kbd
735

736
Keyboard key representation component.
737

738
```typescript { .api }
739
interface KbdProps {
740
  /** Kbd children */
741
  children: React.ReactNode;
742
  /** Kbd size */
743
  size?: MantineSize;
744
}
745
```
746

747
**Usage Example:**
748

749
```tsx
750
import { Kbd, Text, Group } from '@mantine/core';
751

752
function KbdDemo() {
753
  return (
754
    <div>
755
      <Text>
756
        Press <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>M</Kbd> to open developer tools
757
      </Text>
758
      
759
      <Group mt="md">
760
        <Kbd size="xs">⌘</Kbd>
761
        <Kbd size="sm">Ctrl</Kbd>
762
        <Kbd size="md">Shift</Kbd>
763
        <Kbd size="lg">Alt</Kbd>
764
        <Kbd size="xl">Space</Kbd>
765
      </Group>
766
    </div>
767
  );
768
}
769
```
770

771
### Anchor
772

773
Link component with theme integration.
774

775
```typescript { .api }
776
interface AnchorProps {
777
  /** Anchor children */
778
  children?: React.ReactNode;
779
  /** Anchor href */
780
  href?: string;
781
  /** Anchor target */
782
  target?: string;
783
  /** Anchor type */
784
  type?: 'button' | 'reset' | 'submit';
785
  /** If true, link will be underlined */
786
  underline?: 'always' | 'hover' | 'never';
787
  /** Anchor size */
788
  size?: MantineSize;
789
  /** Anchor color */
790
  c?: MantineColor;
791
  /** Anchor weight */
792
  fw?: React.CSSProperties['fontWeight'];
793
}
794
```
795

796
**Usage Example:**
797

798
```tsx
799
import { Anchor, Text } from '@mantine/core';
800

801
function AnchorDemo() {
802
  return (
803
    <Text>
804
      Visit <Anchor href="https://mantine.dev" target="_blank">
805
        Mantine website
806
      </Anchor> for more information. You can also check out our{' '}
807
      <Anchor href="#" underline="always">
808
        always underlined link
809
      </Anchor> or{' '}
810
      <Anchor href="#" underline="never">
811
        never underlined link
812
      </Anchor>.
813
    </Text>
814
  );
815
}
816
```
817

818
### Typography
819

820
Generic typography component for custom text elements.
821

822
```typescript { .api }
823
interface TypographyProps {
824
  /** Typography children */
825
  children?: React.ReactNode;
826
  /** Typography component to render */
827
  component?: React.ElementType;
828
  /** Typography size */
829
  size?: MantineSize | string;
830
  /** Typography color */
831
  c?: MantineColor;
832
  /** Typography weight */
833
  fw?: React.CSSProperties['fontWeight'];
834
  /** Typography style */
835
  fs?: React.CSSProperties['fontStyle'];
836
  /** Typography decoration */
837
  td?: React.CSSProperties['textDecoration'];
838
  /** Typography transform */
839
  tt?: React.CSSProperties['textTransform'];
840
  /** Typography align */
841
  ta?: React.CSSProperties['textAlign'];
842
  /** Line height */
843
  lh?: React.CSSProperties['lineHeight'];
844
}
845
```
846

847
### NumberFormatter
848

849
Component for formatting and displaying numbers.
850

851
```typescript { .api }
852
interface NumberFormatterProps {
853
  /** Number to format */
854
  value: number;
855
  /** If true, thousand separator will be displayed */
856
  thousandSeparator?: boolean | string;
857
  /** Decimal separator */
858
  decimalSeparator?: string;
859
  /** Number of decimal places */
860
  decimalScale?: number;
861
  /** If true, number will have fixed decimal places */
862
  fixedDecimalScale?: boolean;
863
  /** Number prefix */
864
  prefix?: string;
865
  /** Number suffix */
866
  suffix?: string;
867
  /** Allow negative values */
868
  allowNegative?: boolean;
869
  /** Allow leading zeros */
870
  allowLeadingZeros?: boolean;
871
}
872
```
873

874
**Usage Example:**
875

876
```tsx
877
import { NumberFormatter, Stack } from '@mantine/core';
878

879
function NumberFormatterDemo() {
880
  return (
881
    <Stack>
882
      <NumberFormatter value={1000000} thousandSeparator />
883
      <NumberFormatter value={1234.567} decimalScale={2} />
884
      <NumberFormatter value={1234.567} prefix="$" suffix=" USD" />
885
      <NumberFormatter value={1234567.89} thousandSeparator="," decimalSeparator="." />
886
    </Stack>
887
  );
888
}
889
```
890

891
## Theme Integration
892

893
Button and typography components integrate seamlessly with the Mantine theme system:
894

895
```tsx
896
import { MantineProvider, Button, Text, Title } from '@mantine/core';
897

898
const theme = {
899
  components: {
900
    Button: {
901
      defaultProps: {
902
        variant: 'light',
903
        radius: 'md',
904
      },
905
    },
906
    Text: {
907
      defaultProps: {
908
        size: 'sm',
909
      },
910
    },
911
    Title: {
912
      styles: {
913
        root: {
914
          '&[data-order="1"]': {
915
            fontSize: '2rem',
916
            fontWeight: 700,
917
          },
918
        },
919
      },
920
    },
921
  },
922
  fontSizes: {
923
    xs: '0.75rem',
924
    sm: '0.875rem',
925
    md: '1rem',
926
    lg: '1.125rem',
927
    xl: '1.25rem',
928
  },
929
  fontFamily: 'Inter, sans-serif',
930
  headings: {
931
    fontFamily: 'Inter, sans-serif',
932
    sizes: {
933
      h1: { fontSize: '2rem', lineHeight: '1.2' },
934
      h2: { fontSize: '1.5rem', lineHeight: '1.3' },
935
      h3: { fontSize: '1.25rem', lineHeight: '1.4' },
936
    },
937
  },
938
};
939

940
function App() {
941
  return (
942
    <MantineProvider theme={theme}>
943
      {/* Components will use theme defaults */}
944
      <Title order={1}>Main Heading</Title>
945
      <Text>Regular text content</Text>
946
      <Button>Themed Button</Button>
947
    </MantineProvider>
948
  );
949
}
950
```
951

952
## Common Usage Patterns
953

954
**Button Variations:**
955
```tsx
956
import { Button, Group, Stack } from '@mantine/core';
957

958
function ButtonShowcase() {
959
  return (
960
    <Stack>
961
      <Group>
962
        <Button variant="filled">Primary</Button>
963
        <Button variant="outline">Secondary</Button>
964
        <Button variant="light">Tertiary</Button>
965
      </Group>
966
      
967
      <Group>
968
        <Button size="xs">Extra Small</Button>
969
        <Button size="sm">Small</Button>
970
        <Button size="md">Medium</Button>
971
        <Button size="lg">Large</Button>
972
        <Button size="xl">Extra Large</Button>
973
      </Group>
974
      
975
      <Group>
976
        <Button fullWidth>Full Width Button</Button>
977
      </Group>
978
    </Stack>
979
  );
980
}
981
```
982

983
**Typography Hierarchy:**
984
```tsx
985
import { Title, Text, Stack } from '@mantine/core';
986

987
function TypographyHierarchy() {
988
  return (
989
    <Stack>
990
      <Title order={1}>Main Page Title</Title>
991
      <Title order={2}>Section Heading</Title>
992
      <Title order={3}>Subsection Heading</Title>
993
      
994
      <Text size="lg">Lead paragraph text</Text>
995
      <Text>Regular body text</Text>
996
      <Text size="sm" c="dimmed">Small supplementary text</Text>
997
    </Stack>
998
  );
999
}
1000
```
1001

1002
**Interactive Elements:**
1003
```tsx
1004
import { Button, ActionIcon, Group, Tooltip } from '@mantine/core';
1005

1006
function InteractiveElements() {
1007
  return (
1008
    <Group>
1009
      <Button leftSection="💾">Save</Button>
1010
      
1011
      <Tooltip label="Edit item">
1012
        <ActionIcon variant="light">
1013
          ✏️
1014
        </ActionIcon>
1015
      </Tooltip>
1016
      
1017
      <Tooltip label="Delete item">
1018
        <ActionIcon variant="light" color="red">
1019
          🗑️
1020
        </ActionIcon>
1021
      </Tooltip>
1022
    </Group>
1023
  );
1024
}
1025
```
1026

1027
## Accessibility Features
1028

1029
Button and typography components include comprehensive accessibility support:
1030

1031
- **Keyboard Navigation**: Full keyboard support with proper focus management
1032
- **ARIA Labels**: Required aria-label for icon-only buttons and screen reader support
1033
- **Focus Indicators**: Clear visual focus indicators for keyboard users  
1034
- **Color Contrast**: Automatic contrast adjustment with autoContrast prop
1035
- **Semantic HTML**: Proper HTML elements and roles for typography components
1036
- **Screen Reader Support**: Text content is properly announced and structured