ant-design/components/button/demo/component-token.tsx
2024-04-12 12:10:38 +08:00

55 lines
1.5 KiB
TypeScript

import React from 'react';
import { Button, ConfigProvider, Flex } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Button: {
algorithm: true,
colorPrimary: '#1976d2',
controlHeight: 36,
primaryShadow:
'0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)',
fontWeight: 500,
defaultBorderColor: 'rgba(25, 118, 210, 0.5)',
colorText: '#1976d2',
defaultColor: '#1976d2',
borderRadius: 4,
colorTextDisabled: 'rgba(0, 0, 0, 0.26)',
colorBgContainerDisabled: 'rgba(0, 0, 0, 0.12)',
contentFontSizeSM: 12,
},
},
}}
>
<Flex gap="small" vertical>
<Flex wrap gap="small">
<Button type="text">TEXT</Button>
<Button type="primary">CONTAINED</Button>
<Button>OUTLINED</Button>
</Flex>
<Flex wrap gap="small">
<Button type="text" disabled>
TEXT
</Button>
<Button type="primary" disabled>
CONTAINED
</Button>
<Button disabled>OUTLINED</Button>
</Flex>
<Flex wrap gap="small">
<Button type="text" size="small">
TEXT
</Button>
<Button type="primary" size="small">
CONTAINED
</Button>
<Button size="small">OUTLINED</Button>
</Flex>
</Flex>
</ConfigProvider>
);
export default App;