0
# Social Integration
1

2
Pre-configured social media buttons with brand-appropriate styling and automatic link handling for community engagement.
3

4
## Capabilities
5

6
### TwitterButton
7

8
Pre-configured Twitter/X social button with Mantine branding and official links.
9

10
```typescript { .api }
11
/**
12
 * Pre-configured Twitter button with Mantine branding
13
 * Automatically links to official Mantine Twitter account
14
 * Extends SocialButtonProps for flexible styling and link handling
15
 */
16
interface SocialButtonProps extends BoxProps, ElementProps<'a', 'type'> {
17
  icon?: React.ReactNode;
18
}
19

20
function TwitterButton(props?: SocialButtonProps): JSX.Element;
21
```
22

23
**Usage Examples:**
24

25
```typescript
26
import { TwitterButton } from "@mantine/ds";
27

28
function SocialLinks() {
29
  return (
30
    <div>
31
      {/* Default Twitter button */}
32
      <TwitterButton />
33
      
34
      {/* With custom styling */}
35
      <TwitterButton className="my-custom-class" />
36
    </div>
37
  );
38
}
39
```
40

41
### DiscordButton
42

43
Pre-configured Discord social button with Mantine branding and community server link.
44

45
```typescript { .api }
46
/**
47
 * Pre-configured Discord button with Mantine branding
48
 * Automatically links to official Mantine Discord server
49
 * Extends SocialButtonProps for flexible styling and link handling
50
 */
51
function DiscordButton(props?: SocialButtonProps): JSX.Element;
52
```
53

54
**Usage Examples:**
55

56
```typescript
57
import { DiscordButton } from "@mantine/ds";
58

59
function CommunitySection() {
60
  return (
61
    <div>
62
      <h3>Join our community</h3>
63
      <DiscordButton />
64
    </div>
65
  );
66
}
67
```
68

69
**Combined Usage:**
70

71
```typescript
72
import { TwitterButton, DiscordButton } from "@mantine/ds";
73

74
function SocialFooter() {
75
  return (
76
    <div className="social-links">
77
      <h4>Connect with Mantine</h4>
78
      <div className="button-group">
79
        <TwitterButton />
80
        <DiscordButton />
81
      </div>
82
    </div>
83
  );
84
}
85
```
86

87